Menambahkan Class dengan Hover Menggunakan JavaScript
Dalam pengembangan web, sering kali kita ingin mengubah tampilan suatu elemen HTML ketika pengguna mengarahkan kursor ke atasnya. Salah satu cara yang efektif untuk mencapai hal ini adalah dengan menggunakan JavaScript untuk menambahkan kelas CSS saat elemen di-hover.
Berikut adalah langkah-langkah untuk menambahkan kelas CSS dengan hover menggunakan JavaScript:
1. Mendeklarasikan Elemen HTML
Pertama, kita perlu memiliki elemen HTML yang ingin kita modifikasi. Sebagai contoh, kita akan menggunakan elemen <div> dengan ID "myDiv":
Hover Me!
2. Mendeklarasikan Fungsi JavaScript
Selanjutnya, kita perlu membuat fungsi JavaScript yang akan menambahkan kelas CSS ke elemen HTML saat di-hover.
function addClassOnHover(element, className) {
element.addEventListener('mouseover', function() {
element.classList.add(className);
});
element.addEventListener('mouseout', function() {
element.classList.remove(className);
});
}
Kode di atas mendefinisikan fungsi addClassOnHover yang menerima dua argumen:
- element: Elemen HTML yang ingin kita modifikasi.
- className: Nama kelas CSS yang ingin kita tambahkan.
Fungsi ini menggunakan metode addEventListener untuk menempelkan event listener ke elemen. Event listener ini akan memicu fungsi anonim ketika event mouseover dan mouseout terjadi.
- mouseover: Ketika kursor mouse masuk ke area elemen.
- mouseout: Ketika kursor mouse keluar dari area elemen.
Di dalam fungsi anonim, kita menggunakan metode classList.add untuk menambahkan kelas CSS ke elemen ketika event mouseover terjadi. Sebaliknya, kita menggunakan classList.remove untuk menghapus kelas CSS ketika event mouseout terjadi.
3. Menjalankan Fungsi
Terakhir, kita perlu memanggil fungsi addClassOnHover dengan elemen HTML dan nama kelas CSS yang ingin kita tambahkan.
const myDiv = document.getElementById("myDiv");
addClassOnHover(myDiv, "hovered");
Kode di atas memilih elemen HTML dengan ID "myDiv" dan menjalankan fungsi addClassOnHover dengan elemen myDiv dan kelas CSS "hovered".
4. Menambahkan Style CSS
Sekarang kita perlu mendefinisikan style CSS untuk kelas hovered yang telah kita tambahkan:
.hovered {
background-color: #f0f0f0;
color: blue;
}
Style CSS ini akan mengubah warna latar belakang elemen menjadi abu-abu dan warna teks menjadi biru saat kelas hovered ditambahkan.
Kesimpulan
Dengan langkah-langkah di atas, Anda telah berhasil menambahkan kelas CSS dengan hover menggunakan JavaScript. Metode ini dapat digunakan untuk membuat efek visual yang menarik dan interaktif pada elemen web Anda. Anda dapat menyesuaikan kelas CSS dan efeknya sesuai kebutuhan.