Bagaimana untuk menulis hover dalam jquery

Tuding ialah kesan interaktif yang biasa digunakan dalam jquery, yang boleh mencetuskan peristiwa yang sepadan apabila tetikus melayang atau pergi. Berikut memperkenalkan cara menulis hover dalam jquery.

1. Menggunakan tuding untuk satu elemen

Anda boleh menggunakan kaedah hover() jquery untuk menambah pengendali untuk alih tetikus dan meninggalkan acara untuk satu elemen.

$("element").hover(
    function(){
        $(this).addClass("hover");//添加hover类名
    },
    function(){
        $(this).removeClass("hover");//移除hover类名
    }
);

Dalam kod di atas, kami mula-mula memilih elemen dan kemudian menggunakan kaedah hover() untuk menambah pengendali acara. Apabila tetikus bergerak ke dalam elemen, fungsi pertama akan dilaksanakan, yang menambah nama kelas hover pada elemen Apabila tetikus bergerak keluar dari elemen, fungsi kedua akan dilaksanakan, yang mengalih keluar nama kelas hover daripada elemen. .

2. Gunakan hover untuk berbilang elemen

Jika anda perlu mencapai kesan hover untuk berbilang elemen, kita boleh mencapainya dengan melintasi setiap elemen dan kemudian memanggil hover() kaedah .

$(".elements").each(function(){
    $(this).hover(
        function(){
            $(this).addClass("hover");//添加hover类名
        },
        function(){
            $(this).removeClass("hover");//移除hover类名
        }
    );
});

Dalam kod di atas, kami mula-mula memilih semua elemen, kemudian gunakan kaedah each() untuk merentasi setiap elemen, dan kemudian panggil kaedah hover() untuk menambah pengendali acara.

3. Kaedah singkatan tuding

jquery memberikan kami cara yang mudah untuk menyingkatkan kesan tuding. Kita boleh menggunakan kaedah mouseenter() untuk menggantikan parameter pertama kaedah hover() Begitu juga, kita boleh menggunakan kaedah mouseleave() untuk menggantikan parameter kedua kaedah hover().

$("element").mouseenter(function(){
    $(this).addClass("hover");//添加hover类名
}).mouseleave(function(){
    $(this).removeClass("hover");//移除hover类名
});

Dalam kod di atas, kami menggunakan kaedah mouseenter() untuk menambah pengendali peristiwa bergerak masuk tetikus, kaedah mouseleave() untuk menambah pengendali acara keluar tetikus dan menggunakan panggilan berantai untuk memudahkan kod.

Ringkasan

Tuding ialah kesan interaktif yang biasa digunakan dalam jquery, yang boleh mencetuskan peristiwa yang sepadan apabila tetikus melayang atau pergi. jquery menyediakan kaedah hover() dan kaedah singkatan, yang boleh menambah kesan hover pada satu atau berbilang elemen dengan mudah. Apabila menggunakan tuding, anda perlu memberi perhatian untuk mengelak daripada mencetuskan acara beberapa kali untuk meningkatkan prestasi.

Atas ialah kandungan terperinci Bagaimana untuk menulis hover dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!