Membuat Warna Elemen Berubah Saat Disorot Kursor Dengan CSS
Di sini saya membuat selector id link yang berisikan properti color dan value red.
Coba lihat code di bawah ini.
#link { color: red; }
Setelah itu, saya buat lagi yang sama hanya saja id link saya tambahkan :hover. :hover sendiri merupakan sintaks agar saat kursor melintas pada elemen maka elemen akan berubah strukturnya.
Lihat code di bawah.
#link { color: red; } #link:hover { color: green; }
Selanjutnya tinggal membuat kode html yang memuat id css di atas. Di sini saya memilih menggunakan tag a.
Lihat code di bawah.
<a id="link" href="http://www.aplokoid.ga/">Link ini saat disorot akan berganti warna</a>
Masih bingung bagaimana cara membuatnya? Coba lihat gambar di bawah.
Saat dibuka hasilnya.
![]() |
Sebelum kursor melintas |
![]() |
Setelah kursor melintas |
Selain hover, juga ada yang lain seperti visited, link, dan focus. Tetapi focus hanya bisa digunakan pada elemen text input.
Itu saja semoga bermanfaat.
0 Komentar