Bagaimanakah JavaScript Boleh Melumpuhkan CSS :hover Effects?-tutorial css-php.cn

Bagaimanakah JavaScript Boleh Melumpuhkan CSS :hover Effects?

Barbara Streisand

Lepaskan： 2024-12-03 20:12:13

asal

291 orang telah melayarinya

How Can JavaScript Disable CSS :hover Effects?

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 elemen.

CSS:
Hadkan gaya :hover untuk digunakan hanya apabila kelas "nojQuery" terdapat pada elemen.

JavaScript:
Apabila JavaScript dimuatkan, alih keluar kelas "nojQuery" daripada elemen, melumpuhkan gaya tuding secara berkesan.

Contoh:

<body class="nojQuery">

Salin selepas log masuk

body.nojQuery ul#mainFilter a:hover {
  /* CSS-only hover styles here */
}

Salin selepas log masuk

$(function() {
  $('body').removeClass('nojQuery');
});

Salin selepas log masuk

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!