Sign in Subscribe
Javascript

Cara Kerja MouseOver dan MouseOut dalam Interaksi Pengguna

Cara Kerja MouseOver dan MouseOut dalam Interaksi Pengguna
Photo by maar gaming / Unsplash

Saat berinteraksi dengan halaman web, pengguna sering kali menggerakkan mouse di atas elemen tertentu. JavaScript menyediakan event MouseOver dan MouseOut untuk menangkap interaksi ini. Event ini berguna untuk berbagai efek seperti animasi hover, perubahan warna, tooltip, atau elemen interaktif lainnya.

Dalam artikel ini, kita akan membahas perbedaan MouseOver dan MouseOut, cara menggunakannya, serta contoh implementasinya untuk meningkatkan pengalaman pengguna.

Perbedaan MouseOver dan MouseOut

Event Kapan Dipicu? Berpengaruh ke Child Element?
mouseover Saat mouse masuk ke dalam elemen ✅ Ya, akan dipicu setiap kali masuk ke child element
mouseout Saat mouse keluar dari elemen ✅ Ya, akan dipicu setiap kali keluar dari child element
Catatan: Jika ingin menangani event hanya pada elemen utama tanpa mempengaruhi child, gunakan mouseenter dan mouseleave sebagai alternatif.

Cara Menggunakan MouseOver dan MouseOut

Kita bisa menangkap event ini menggunakan addEventListener() atau atribut event langsung di HTML.

1. Menangani MouseOver dan MouseOut dengan JavaScript

Contoh sederhana untuk mengubah warna elemen saat mouse berada di atasnya:

<div id="box" style="width: 200px; height: 100px; background-color: lightgray; text-align: center; line-height: 100px;">
    Arahkan Mouse ke Sini
</div>

document.getElementById("box").addEventListener("mouseover", function() {
    this.style.backgroundColor = "blue";
    this.style.color = "white";
    this.textContent = "Mouse di atas!";
});

document.getElementById("box").addEventListener("mouseout", function() {
    this.style.backgroundColor = "lightgray";
    this.style.color = "black";
    this.textContent = "Arahkan Mouse ke Sini";
});

Saat mouse berada di atas elemen, warna latar akan berubah menjadi biru dan teks akan diperbarui. Saat mouse keluar, warna dan teks akan kembali seperti semula.

2. Menggunakan MouseOver untuk Menampilkan Tooltip

Tooltip adalah teks kecil yang muncul saat pengguna mengarahkan mouse ke elemen tertentu.

<button id="btn">Hover untuk Info</button>
<div id="tooltip" style="display: none; position: absolute; background: black; color: white; padding: 5px; border-radius: 5px;">
    Ini adalah tooltip!
</div>

const btn = document.getElementById("btn");
const tooltip = document.getElementById("tooltip");

btn.addEventListener("mouseover", function(event) {
    tooltip.style.display = "block";
    tooltip.style.left = event.pageX + "px";
    tooltip.style.top = event.pageY + "px";
});

btn.addEventListener("mouseout", function() {
    tooltip.style.display = "none";
});

Saat mouse diarahkan ke tombol, tooltip akan muncul. Saat mouse keluar, tooltip akan disembunyikan kembali.

3. Menggunakan MouseOver dan MouseOut untuk Menu Dropdown

Menu dropdown adalah contoh lain di mana mouseover dan mouseout sering digunakan.

<div id="menu">
    <button id="menuBtn">Menu</button>
    <ul id="dropdown" style="display: none; position: absolute; background: white; border: 1px solid gray; padding: 10px;">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");

menu.addEventListener("mouseover", function() {
    dropdown.style.display = "block";
});

menu.addEventListener("mouseout", function() {
    dropdown.style.display = "none";
});

Saat mouse berada di atas menu, dropdown akan muncul. Saat mouse keluar, dropdown akan disembunyikan kembali.

Menggunakan MouseEnter dan MouseLeave Sebagai Alternatif

Jika ingin menangani event tanpa mempengaruhi child element, gunakan mouseenter dan mouseleave.

document.getElementById("box").addEventListener("mouseenter", function() {
    this.style.backgroundColor = "green";
});

document.getElementById("box").addEventListener("mouseleave", function() {
    this.style.backgroundColor = "lightgray";
});

Dengan mouseenter dan mouseleave, event hanya dipicu satu kali saat mouse masuk atau keluar dari elemen utama, tanpa memperhitungkan child element.

Kapan Menggunakan MouseOver dan MouseOut?

✅ Gunakan MouseOver dan MouseOut jika ingin menangani interaksi hover yang melibatkan child element seperti submenu atau efek kompleks.
✅ Gunakan MouseEnter dan MouseLeave jika hanya ingin menangani event pada elemen utama tanpa mempengaruhi child.
✅ Gunakan MouseOver untuk menampilkan tooltip, efek hover, atau animasi interaktif.
✅ Gunakan MouseOut untuk menyembunyikan tooltip, dropdown, atau efek lainnya saat mouse keluar dari area elemen.

Kesimpulan

  • MouseOver dan MouseOut digunakan untuk menangkap pergerakan mouse di atas elemen dan keluar dari elemen.
  • MouseOver dipicu setiap kali mouse masuk ke elemen atau child-nya, sementara MouseOut dipicu saat mouse keluar dari elemen atau child-nya.
  • Jika hanya ingin menangkap event pada elemen utama tanpa child, gunakan MouseEnter dan MouseLeave.
  • Event ini berguna untuk efek visual, tooltip, dropdown, dan interaksi pengguna lainnya.

Dengan memahami cara kerja MouseOver dan MouseOut, kita bisa menciptakan efek hover yang lebih dinamis dan interaktif dalam aplikasi web!

Read next