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

