Share a pure CSS example of a mouse hover display picture effect

Here to recommend a pure CSS to implement the mouse hover display picture effect of the instance share, in order to move the mouse to the TR label to add hover the simplest way to demonstrate, simple and clear, the need for friends can refer to the next

Recently in a network disk project, the use of the mouse to move the effect, the effect can be achieved with JS, the main share today, how this effect with pure CSS implementation!

Effects such as:

HTML code

<table id= "filelist" style= "width:100%;" > <tbody> <tr> <td class= "filename ui-draggable ui-droppable" width= "30%;" > <p class= "name" > <span class= "fileactions" > < A href= "#" class= "Action action-download" data-action= "Download" original-title= "" >  <span> downloads </span> </ A> <a href= "#" class= "Action action-share permanent" data-action= "share" original-title= ""                            ;                         <span> shared </span> </a> </span> </p> </td> <td class= "fi Lesize "style=" Color:rgb ( -4780,-4780,-4780) ">70.3 mb</td> <tD class= "Date" > <span class= "Modified" title= "September, 14:45" style= "Color:rgb (0,0,0)" >2            Minutes ago </span> <a href= "#" original-title= "delete" class= "action Delete Delete-icon" ></a> </td> </tr> <tr > &LT;TD class= "filename ui-draggable ui-droppable" width = "30%;" > <p class= "name" > <span class= "fileactions" > &lt ; a href= "#" class= "Action action-download" data-action= "Download" >  <span> downloads </span> </a> <a href= "#" class= "Action action-share" data-action= "Share" >  <span> sharing </span> </a> </span> </p> </td> <td class= "filesize" style= "Color:rgb (159,159,15 9) ">762 kb</td> <td class=" Date "> <span class=" Modified "style=" Color:rgb (0,0, 0) "original-title=" September, 16:36 ">2 minutes ago </span> <a href=" # "original-title=" Delete "Clas s= "Action Delete delete-icon" ></a> </td> </tr> </tbody></table>

The above code I directly copied from the project, there may be a lot of superfluous CSS, everyone just look at the approximate code!

Essence of CSS

The effect of the picture, the general idea is that the first set to Opacity=0, and then the mouse moved up after the display.

The code is as follows:

#filelist a.action {       display:inline;       padding:18px 8px;       line-height:50px;       -ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=0)";       Filter:alpha (opacity=0);       opacity:0;       Display:none;   }   #filelist tr:hover a.action, #filelist a.action.permanent{       -ms-filter: "Progid:d XImageTransform.Microsoft.Alpha (opacity=50) ";       Filter:alpha (opacity=50);       Opacity:. 5;       display:inline;   }   #filelist tr:hover a.action:hover {       -ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=100)";       Filter:alpha (opacity=100);       opacity:1;       Display:inline;   }

Above is the approximate essence of the code!

CSS Tips Analysis

TR Mouse to move up, the following a-label display can be so selected #filelist Tr:hover A.action added tr mouse to move up hover, then tr under the A-label mouse move up The effect is also useful, so write: #filelist tr:hover A.action:hover

jquery has attr, activity tag properties, and CSS can be similar to jquery's choice.

For example, the a tag below

<a href= "#"  data-action= "Rename"  class= "action" ></a>

We can write this style:

a.action[data-action= "Rename"]{       padding:16px 14px 17px!important;       position:relative;       Top: -21px;   }

Have you got any gains from reading this article? Do not know through this article, you have a closer understanding of CSS!