Bagaimana untuk menetapkan hover dalam jquery

Dalam pembangunan bahagian hadapan, elemen pada halaman web biasanya perlu berinteraksi dengan tetikus pengguna Yang paling biasa ialah kesan hover: apabila tetikus melayang di atas elemen, elemen itu akan mengalami beberapa perubahan visual, seperti. warna, Saiz dll. Pada masa ini kita perlu menggunakan kaedah hover dalam jQuery untuk mencapai ini.

Sekarang izinkan saya memperkenalkan secara terperinci cara menggunakan kaedah hover dalam jQuery untuk menetapkan kesan hover.

1. Sintaks asas kaedah hover() dalam jQuery

Kita perlu memahami sintaks asas kaedah hover():

$(selector).hover(inFunction,outFunction)

Antaranya, pemilih ialah satu Elemen yang dipilih, inFunction ialah fungsi yang akan dilaksanakan apabila tetikus bergerak ke atas elemen, dan outFunction ialah fungsi yang akan dilaksanakan apabila tetikus bergerak keluar daripada elemen. Ia boleh dilihat bahawa melalui kaedah hover(), kita boleh melaksanakan fungsi yang berbeza apabila tetikus bergerak masuk dan keluar dari elemen.

2 Gunakan kaedah hover() untuk menetapkan kesan hover

Seterusnya, mari kita tunjukkan cara menggunakan kaedah hover() untuk menetapkan kesan hover.

Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Seterusnya, kami mencipta elemen sampel dan menambah beberapa gaya css:

<div class="example">hover me</div>

<style>
.example {
    width: 100px;
    height: 50px;
    background-color: #FFC0CB;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
}
</style>

Sekarang, mari berikan Elemen contoh ini menetapkan kesan hover. Apabila tetikus bergerak masuk, warna latar belakang ditukar dan kandungan teks diubah suai apabila tetikus bergerak keluar, elemen dipulihkan kepada keadaan asalnya.

<script>
$(function() {
    $(".example").hover(function() {
        // 鼠标移入时执行的函数
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠标移出时执行的函数
        $(this).css("background-color", "#FFC0CB");
        $(this).text("hover me");
    });
});
</script>

Terangkan kod di atas:

• Fungsi $() digunakan untuk memilih elemen, di sini elemen dengan contoh kelas dipilih
• kaedah hover(). Lulus dalam dua fungsi, fungsi pertama ialah fungsi yang akan dilaksanakan apabila tetikus bergerak masuk, dan fungsi kedua ialah fungsi yang akan dilaksanakan apabila tetikus bergerak keluar; dua fungsi.
• Dengan cara ini, kesan hover mudah dicapai.

3. Kegunaan lain kaedah hover()

Selain penggunaan di atas, kaedah hover() mempunyai kegunaan lain.

tuding(handlerInOut)

1. Penggunaan ini hanya perlu lulus dalam fungsi, yang akan ditetapkan sebagai pengendali untuk acara bergerak masuk dan keluar tetikus di masa yang sama. Contohnya:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    });
});

Dengan cara ini, apabila tetikus bergerak ke dalam elemen .example, warna latar belakang akan bertukar kepada #ffc73d. Tiada perubahan akan berlaku apabila dialih keluar.

hover(enterHandler,leaveHandler)

2. Penggunaan ini serupa dengan hover(inFunction,outFunction), kecuali kedudukan parameter fungsi adalah berbeza. Contohnya:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    }, function() {
        $(this).css("background-color", "#FFC0CB");
    });
});

Dengan cara ini, apabila tetikus bergerak ke dalam elemen .example, warna latar belakang akan bertukar kepada #ffc73d. Ia akan dipulihkan apabila dialih keluar.

4. Ringkasan

Di atas ialah cara menggunakan kaedah hover() jQuery untuk menetapkan kesan hover. Apabila menggunakannya, kita hanya perlu memilih elemen yang kesannya akan ditetapkan, dan kemudian masukkan fungsi yang sepadan melalui kaedah hover().

Sudah tentu, dalam pembangunan sebenar, kita juga mungkin memerlukan kesan lekukan yang lebih kompleks, seperti kesan animasi, dsb. Dalam kes ini, jQuery menyediakan perpustakaan kesan animasi yang berkuasa, yang boleh kami gunakan untuk mencapai kesan hover yang lebih kaya.

Secara amnya, kaedah hover() yang disediakan oleh jQuery boleh dengan cepat dan berkesan mencapai kesan hover elemen halaman web, yang meningkatkan kecekapan pembangunan bahagian hadapan dan membolehkan pembangun lebih fokus pada pelaksanaan logik perniagaan.

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