Dieser Artikel beschreibt die Methode zum Surfen der Maskenschicht in JS -Maus. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
HTML -Seitencode:
Kopieren Sie den Code wie folgt: <ul>
<li> <a data-title = "science" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <span> Science </span> </a> </li>
<li> <a data-title = "Animation" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)"> ">"> ">"> ">"> ">"> ">">
</i> <span> Anime </span> </a> </li>
<li> <a data-title = "life" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_otnr_43a60000050a118c.jpg)">
</i> <span> Leben </span> </a> </li>
<li> <a data-title = "illustration" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <span> Illustration </span> </a> </li>
<li> <a data-title = "music" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_krfk_6323000018bd125d.jpg)"> ">"> ">"> ">"> ">"> ">"> ">"> ">">
</i> <span> musik </span> </a> </li>
<li> <a data-title = "natürliches" href = "#"> <i style = "Hintergrund-Image: URL (Bilder/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <span> Natural </span> </a> </li>
</ul>
JS -Code:
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
$ (function () {
// Die Maskenebene ändert sich die Höhe, wenn sich die Maus bewegt, und wird klarer
var $ site_li = $ (". Site-Tag li");
$ SITE_LI.HOVER (function () {
var Indexs = $ Site_LI.Index (this);
$ (this) .css ("Höhe", "90"). Find (". Tag-Tit"). CSS ("Top", "30"). CSS ("Farbe", "#ffff");
// Erhalten Sie den Index des aktuellen Klickelements in allen Li -Elementen
// alarm (Index+1);
$ (this) .prev (). CSS ("Höhe", "30");
$ (this) .Next (). CSS ("Höhe", "30");
}, function () {
$ SITE_LI.CSS ("Höhe", "50");
});
});
</script>
CSS -Code:
Kopieren Sie den Code wie folgt: ul li {Listenstil: Keine;}
.Site-Tag {Breite: 200px; Überlauf: versteckt; Z-Index: 5;}
.Site-Tag li {Position: Relativ; Breite: 200px; Höhe: 50px; Randboden: 1PX; Überlauf: versteckt;
Übergang: Höhe von 0,5 Sekunden; -Webkit-Übergang: Höhe 0,5 Sekunden;
-moz-Übergang: Höhe 0,5 Sekunden; -O-Übergang: Höhe von 0,5 Sekunden;}
.Site-Tag li a {Farbe: #666; Schriftgröße: 16px; Schriftgewicht: fett; Zeilenhöhe: 50px;}
.Site-Tag li i {display: block; Höhe: 90px; Hintergrundposition: Center Center;
Deckkraft: 0,3; Filter: Alpha (Opazität = 3); /*Transparenz einstellen*/
-Webkit-Übergang: Deckkraft 0,5 Leichtigkeit; /**//
-Webkit-Filter: Graustufen (60%); /**//
}
.Site-Tag Li: Hover I {Deckkraft: 0,9; -Webkit-Filter: Graustufen (0%); Übergang: Deckkraft von 0,5 Sekunden;}
.Tag-tit {display: block; Höhe: 100px; Breite: 700px; Farbe:#666; Schriftgröße: 14px;}
.Site-Tag li .tag-tit {Position: absolut; Oben: 0px; links: 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);};};
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.