Cara Menangani Hover Mouse dengan jQuery

Merespons kursor yang masuk dan keluar elemen dipakai untuk menu, tooltip, atau efek sorot. Artikel ini membahas cara menangani hover mouse dengan jQuery.

Metode .hover()

<script>
$("#kotak").hover(
    function() { $(this).addClass("sorot"); },   // mouse masuk
    function() { $(this).removeClass("sorot"); }  // mouse keluar
);
</script>

Contoh Kasus: Tooltip Sederhana

<script>
$(".punya-tooltip").hover(
    function() {
        const teks = $(this).data("tooltip");
        $("<div class='tooltip'></div>").text(teks).appendTo("body");
    },
    function() {
        $(".tooltip").remove();
    }
);
</script>

Alternatif mouseenter/mouseleave

<script>
$("#kotak").on("mouseenter", function() { /* masuk */ });
$("#kotak").on("mouseleave", function() { /* keluar */ });
</script>

Kesimpulan

Gunakan .hover() dengan dua fungsi untuk menangani mouse masuk dan keluar dalam satu perintah, ideal untuk efek sorot atau tooltip. Alternatifnya adalah event mouseenter/mouseleave.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *