Membuat Warna Elemen Berubah Saat Disorot Kursor Dengan CSS

Membuat Warna Elemen Berubah Saat Disorot Kursor Dengan CSS

Sudah lama sekali rasanya sejak saya terakhir mengetik artikel seperti ini. Kali ini saya ingin memberikan sebuah tutorial Cara Membuat Warna Elemen Berubah Saat Disorot Kursor Dengan CSS. Intinya, saat kursor melintas di elemen html, maka otomatis warnanya akan berubah.

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.