Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuang hover dalam jquery css
Kelas pseudo :hover dalam CSS mentakrifkan gaya apabila penunjuk tetikus melayang di atas elemen Ini adalah situasi yang sering digunakan dalam pembangunan web. Tetapi terdapat situasi di mana kita perlu mengalih keluar gaya tuding. Pada masa ini, anda boleh menggunakan jQuery untuk mengalih keluar kesan :hove.
Kaedah 1: Gunakan removeClass()
Menggunakan kaedah removeClass() jQuery untuk mengalih keluar kod gaya kelas pseudo :hover ialah kaedah yang paling mudah. Sintaksnya adalah seperti berikut:
$("selector").removeClass("className");
Kaedah ini boleh digunakan pada mana-mana elemen dengan nama kelas. Contohnya:
$("a").removeClass("hover");
Kaedah ini boleh mengalih keluar gaya bernama hover daripada semua elemen.
Kaedah 2: Gunakan acara mouseleave
Menggunakan acara mouseleave jQuery juga boleh mengalih keluar kesan kelas pseudo :hover. Melakukan tindakan tersuai apabila tetikus meninggalkan elemen yang ditentukan. Acara mouseleave sepadan dengan acara mouseenter.
Sintaksnya adalah seperti berikut:
$("selector").mouseleave(function(){
// Alih keluar kod gaya yang ditentukan berkaitan
});
Contohnya:
$("a").mouseleave(function(){
$(this).css("background-color","white");
} );
Contoh ini adalah untuk menetapkan warna latar belakang pautan kepada putih apabila tetikus meninggalkannya.
Kaedah 3: Gunakan acara Mouseout
Menggunakan acara keluar tetikus jQuery juga boleh mencapai kesan yang sama Apabila tetikus elemen meninggalkannya, lakukan operasi tertentu.
Sintaksnya adalah seperti berikut:
$("selector").mouseout(function(){
// Alih keluar kod gaya yang ditentukan berkaitan
});
Contohnya:
$("a").mouseout(function(){
$(this).css("background-color","white");
} ) ;
Ini adalah sama seperti peristiwa mousemove yang dinyatakan di atas, kerana kedua-duanya melakukan operasi yang sepadan apabila tetikus meninggalkan elemen.
Ringkasan
Dalam pembangunan sebenar, pembangun perlu memilih kaedah yang berbeza untuk mengalih keluar kesan kelas pseudo :hover mengikut situasi sebenar. Tiga kaedah di atas adalah kaedah yang paling biasa digunakan dalam pembangunan sebenar dan boleh mencapai hasil yang lebih baik.
Atas ialah kandungan terperinci Bagaimana untuk membuang hover dalam jquery css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!