Langkah 4: Interaksi dengan JavaScript
Untuk menambahkan interaksi atau efek tambahan pada icon bar, kita dapat menggunakan JavaScript. Misalnya, kita dapat menambahkan efek animasi saat pengguna mengarahkan kursor ke salah satu ikon.
Berikut adalah contoh sederhana menggunakan JavaScript untuk menambahkan efek hover pada icon bar:
<script>
const icons = document.querySelectorAll('.icon-bar a');
icons.forEach(icon => {
icon.addEventListener('mouseover', () => {
icon.classList.add('hovered');
});
icon.addEventListener('mouseout', () => {
icon.classList.remove('hovered');
});
});
</script>
Dalam contoh di atas, kita menambahkan event listener untuk setiap ikon dalam icon bar. Ketika pengguna mengarahkan kursor ke ikon, kita menambahkan kelas “hovered” untuk memberikan efek visual tambahan.
