Rumah >hujung hadapan web >tutorial css >Bagaimanakah JavaScript Boleh Melumpuhkan CSS :hover Effects?
Bagaimanakah JavaScript Boleh Melumpuhkan CSS :hover Effects?
- Barbara Streisandasal
- 2024-12-03 20:12:13264semak imbas
Melumpuhkan CSS :hover Effect Menggunakan JavaScript
Mencapai kesan hover yang lebih lancar dengan JavaScript sambil mengekalkan gaya CSS boleh menjadi satu cabaran. Begini cara untuk mengatasinya:
Pernyataan Masalah:
Halang penyemak imbas daripada menggunakan kesan CSS :hover pada elemen tertentu apabila JavaScript tersedia.
Penyelesaian:
Tiada mekanisme JavaScript tulen untuk melumpuhkan keadaan :hover. Walau bagaimanapun, penyelesaian melibatkan penggunaan kelas untuk mengawal kesan tuding dalam CSS dan JavaScript.
HTML:
Tambahkan kelas "nojQuery" pada
CSS:
Hadkan gaya :hover untuk digunakan hanya apabila kelas "nojQuery" terdapat pada
JavaScript:
Apabila JavaScript dimuatkan, alih keluar kelas "nojQuery" daripada
Contoh:
<body class="nojQuery">
body.nojQuery ul#mainFilter a:hover {
/* CSS-only hover styles here */
}
$(function() {
$('body').removeClass('nojQuery');
});
Pendekatan ini membolehkan anda mengatasi kesan tuding CSS dengan JavaScript tanpa perlu menetapkan semula setiap sifat individu secara eksplisit.
Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Melumpuhkan CSS :hover Effects?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!