Add And Remove Class On Mouseover Javascript

3 min read Jun 22, 2024

Add And Remove Class On Mouseover Javascript

Menambahkan dan Menghapus Class dengan Mouseover di JavaScript

Artikel ini akan membahas bagaimana Anda dapat menambahkan dan menghapus kelas CSS pada elemen HTML saat mouseover dan mouseout menggunakan JavaScript.

Memahami Mouseover dan Mouseout

Mouseover adalah event yang terjadi saat kursor mouse bergerak di atas elemen HTML. Mouseout adalah event yang terjadi saat kursor mouse meninggalkan elemen HTML.

Kode Dasar

Berikut adalah contoh kode dasar untuk menambahkan dan menghapus kelas dengan mouseover dan mouseout:

const element = document.getElementById("myElement");

element.addEventListener("mouseover", () => {
  element.classList.add("hover");
});

element.addEventListener("mouseout", () => {
  element.classList.remove("hover");
});

Penjelasan:

document.getElementById("myElement"): Mencari elemen HTML dengan id "myElement".
element.addEventListener("mouseover", () => { ... }): Menambahkan event listener untuk event "mouseover" pada elemen.
element.classList.add("hover"): Menambahkan kelas "hover" ke elemen saat mouseover.
element.addEventListener("mouseout", () => { ... }): Menambahkan event listener untuk event "mouseout" pada elemen.
element.classList.remove("hover"): Menghapus kelas "hover" dari elemen saat mouseout.

Contoh Penggunaan

Misalnya, Anda ingin mengubah warna latar belakang elemen saat mouseover:

Hover me!

Kode ini akan mengubah latar belakang div menjadi abu-abu (#eee) saat kursor mouse berada di atasnya, dan kembali ke putih (#fff) saat kursor mouse meninggalkan div.

Tips Tambahan

Anda dapat menggunakan event listener lainnya seperti click, mousedown, dan mouseup untuk menambahkan dan menghapus kelas pada elemen HTML.
Anda dapat menambahkan dan menghapus beberapa kelas sekaligus dengan element.classList.add("class1", "class2") dan element.classList.remove("class1", "class2").
Anda dapat menggunakan element.classList.contains("class") untuk memeriksa apakah elemen memiliki kelas tertentu.

Kesimpulan

Dengan menggunakan event listener mouseover dan mouseout, Anda dapat dengan mudah menambahkan dan menghapus kelas CSS pada elemen HTML untuk mengubah tampilannya secara dinamis saat pengguna menggerakkan mouse.