Artikel ini menjelaskan metode menjelajahi lapisan topeng di JS Mouse. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Kode Halaman HTML:
Salin kode sebagai berikut: <ul>
<li> <a data-title = "science" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <span> sains </span> </a> </li>
<li> <a data-title = "animasi" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">
</i> <span> anime </span> </a> </li>
<li> <a data-title = "life" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_otnr_43a60000050a118c.jpg)">
</i> <span> Life </span> </a> </li>
<li> <a data-title = "ilustrasi" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <span> Ilustrasi </span> </a> </li>
<li> <a data-title = "musik" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_krfk_6323000018bd125d.jpg)">
</i> <span> musik </span> </a> </li>
<li> <a data-title = "alami" href = "#"> <i style = "latar belakang-gambar: url (gambar/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <span> Natural </span> </a> </li>
</ul>
Kode JS:
Salin kode sebagai berikut: <script type = "text/javascript">
$ (function () {
// lapisan topeng, ketinggian berubah saat mouse bergerak ke atas, dan menjadi lebih jelas
var $ site_li = $ (". Site-tag li");
$ site_li.hover (function () {
indeks var = $ site_li.index (ini);
$ (ini) .css ("tinggi", "90"). Temukan (". Tag-tit"). CSS ("Top", "30"). CSS ("Color", "#FFFFF");
// Dapatkan indeks elemen klik LI saat ini di semua elemen Li
// peringatan (indeks+1);
$ (ini) .prev (). css ("tinggi", "30");
$ (ini) .next (). css ("tinggi", "30");
}, fungsi () {
$ site_li.css ("tinggi", "50");
});
});
</script>
Kode CSS:
Salin kode sebagai berikut: ul li {List-style: none;}
.site-tag {lebar: 200px; meluap: tersembunyi; z-index: 5;}
.site-tag li {position: relatif; Lebar: 200px; Tinggi: 50px; margin-bottom: 1px; meluap: tersembunyi;
Transisi: Tinggi 0,5 -an Kemudahan; -webkit-transisi: tinggi 0,5-an kemudahan;
-Moz-transisi: tinggi 0,5-an kemudahan; --transisi: tinggi 0,5s kemudahan;}
.site-tag li a {color: #666; font-size: 16px; Font-Weight: Bold; Line-Height: 50px;}
.site-tag li i {display: block; Tinggi: 90px; Latar belakang posisi: pusat tengah;
Opacity: 0.3; filter: alpha (opacity = 3); /*Atur transparansi*/
-webkit-transisi: opacity 0.5 kemudahan; /**/
-webkit-filter: grayscale (60%); /**/
}
.site-tag li: hover i {opacity: 0.9; -webkit-filter: grayscale (0%); Transisi: Opacity 0.5S Kemudahan;}
.tag-tit {display: block; Tinggi: 100px; Lebar: 700px; Warna:#666; Ukuran font: 14px;}
.site-tag li .tag-tit {position: absolute; Atas: 0px; Kiri: 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);}
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.