Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris

Ici, je voudrais vous recommander un exemple d'utilisation de CSS pur pour obtenir l'effet d'affichage d'images au survol de la souris. Il est démontré de la manière la plus simple d'ajouter un survol en déplaçant la souris vers la balise tr. clear. Les amis qui en ont besoin peuvent s'y référer.

Récemment, je travaille sur un projet de disque réseau, qui utilise l'effet du déplacement de la souris vers le haut. Cet effet peut être obtenu avec js. comment obtenir cet effet avec du CSS pur !

L'effet est le suivant :

Code HTML

<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="">
                            <img  class="svg" src="svg/download.svg" alt="Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share permanent" data-action="Share" original-title="">
                            <img  class="svg" src="svg/public.svg" alt="Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris" >
                            <span>已共享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(-4780,-4780,-4780)">70.3 MB</td>
            <td class="date">
                <span class="modified" title="September 29, 2014 14:45" style="color:rgb(0,0,0)">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>

        <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">
                            <img  class="svg" src="svg/download.svg" alt="Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share" data-action="Share">
                            <img  class="svg" src="svg/share.svg" alt="Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris" >
                            <span>分享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(159,159,159)">762 kB</td>
            <td class="date">
                <span class="modified" style="color:rgb(0,0,0)" original-title="September 29, 2014 16:36">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>
        </tbody>
</table>

J'ai copié le code ci-dessus directement depuis le projet , il y a peut-être beaucoup de CSS redondants, tout le monde jette juste un œil au code général !

Css essentiel

L'effet dans l'image, l'idée générale est de le mettre à opacity=0 au début, puis de déplacer la souris vers le haut pour l'afficher .

Le code est le suivant :

#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:DXImageTransform.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;   
}

Ce qui précède est l'essence approximative du code !

analyse des compétences CSS

Déplacez la souris tr vers le haut, et la balise a ci-dessous montre que vous pouvez choisir comme ceci #filelist tr:hover a.action Ajoutez tr et déplacez la souris vers le haut pour survoler, Ensuite, l'effet de déplacer la souris vers le haut sur la balise a sous tr est également utile. Écrivez comme ceci : #filelist tr:hover a.action:hover

Il y a attr dans jquery. , et les attributs de la balise active, css peuvent également être les mêmes que les options similaires de jquery.

Par exemple, dans la suite d'une balise

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

on peut écrire le style comme ceci :

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

Écoutez Avez-vous gagné quelque chose grâce à cet article ? Je me demande si vous comprenez mieux CSS grâce à cet article !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!