Comment apparaître la couche de masquage lorsque la suspension de la souris JS

Cet article décrit la méthode de surfer sur la couche de masque dans JS Mouse. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:

Code de page HTML:

Copiez le code comme suit: <ul>

<li> <a data-title = "science" href = "#"> <i style = "background-image: url (images / xiaozhan / main_ojls_1aa6000200891260.jpg)">

</i> <span> science </span> </a> </li>

<li> <a data-title = "animation" href = "#"> <i style = "background-image: url (images / xiaozhan / main_nh8v_2e310001ebd1118e.jpg)">

</i> <span> anime </span> </a> </li>

<li> <a data-title = "life" href = "#"> <i style = "background-image: url (images / xiaozhan / main_otnr_43a60000050a118c.jpg)">

</i> <span> vie </span> </a> </li>

<li> <a data-title = "illustration" href = "#"> <i style = "background-image: url (images / xiaozhan / main_ud3z_2e510002074f118e.jpg)">

</i> <span> illustration </span> </a> </li>

<li> <a data-title = "music" href = "#"> <i style = "background-image: url (images / xiaozhan / main_krfk_6323000018bd125d.jpg)">

</i> <span> musique </span> </a> </li>

<li> <a data-title = "naturel" href = "#"> <i style = "background-image: url (images / xiaozhan / main_uabs_764f0001ff601190.jpg)">

</i> <span> naturel </span> </a> </li>

</ul>

Code js:

Copiez le code comme suit: <script type = "text / javascript">

$ (function () {

// La couche de masque, la hauteur change lorsque la souris monte et devient plus claire

var $ site_li = $ (". Site-tag li");

$ site_li.hover (function () {

var index = $ site_li.index (this);

$ (this) .css ("height", "90"). find (". tag-tit"). css ("top", "30"). css ("couleur", "#ffff");

// Obtenez l'index de l'élément Click Li actuel dans tous les éléments Li

// alerte (index + 1);

$ (this) .prev (). css ("hauteur", "30");

$ (this) .next (). css ("hauteur", "30");

}, fonction () {

$ site_li.css ("hauteur", "50");

});

});

</cript>

Code CSS:

Copiez le code comme suit: ul li {list-style: Aucun;}

.Tite-tag {largeur: 200px; débordement: caché; Z-Index: 5;}

.Tite-tag li {position: relatif; Largeur: 200px; hauteur: 50px; marge-fond: 1px; débordement: caché;

Transition: hauteur 0,5 s facilité; -Webkit-Transition: hauteur 0,5 s facilité;

-Moz-transition: hauteur 0,5 s facilité; -o-transition: hauteur 0,5 s facilité;}

.Tite-tag li a {couleur: # 666; taille de police: 16px; Font-Weight: Bold; Line-Height: 50px;}

.site-tag li i {affichage: bloc; hauteur: 90px; Position d'arrière-plan: centre central;

Opacité: 0,3; filtre: alpha (opacité = 3); / * Définir la transparence * /

-Webkit-Transition: Opacité 0,5 facilité; / ** /

-Webkit-filtre: niveaux de gris (60%); / ** /

}

.Tite-tag li: Hover I {Opacité: 0,9; -Webkit-Filter: GraysCale (0%); transition: opacité 0,5s facilité;}

.tag-tit {affichage: bloc; hauteur: 100px; Largeur: 700px; Couleur: # 666; taille de police: 14px;}

.Site-tag li .tag-tit {position: absolu; En haut: 0px; Gauche: 10px; Text-shadow: 1px 1px 1px RGB (0,0,0,0,1);}

A: Hover .Tag-Tit {Text-Shadow: 1PX 1PX 1PX RGB (0,0,0,0,5);}

J'espère que cet article sera utile à la programmation JavaScript de tous.