Skip to main content

B.6.1. Hover

Nah pada chapter ini kita akan membahas mengenai hover. Sebeumnya teman-teman pernah membayangkan jika suatu elemen yang kita buat di sorot dengan menggunakan mouse? kalau iya, kita bisa menerapkan style yang berbeda lo dengan menggunakan hover😁.

hover ini diterapkan ketika pengguna mengarahkan kursor mouse ke elemen tersebut. Ini sering digunakan untuk efek pada tombol atau tautan.

Contohnya seperti ini, kita akan memiliki sebuah div yang awalnya berwarna bisque lalu ketika di sorot menggunakan mouse, maka div tadi akan berubah menjadi warna pink.

Oke tanpa basa-basi lagi, let's code!

<button class="hover-button">Hover Me</button>

Hasil dari kode di atas kurang lebih akan terlihat seperti gambar di bawah ini.

Output

Nah, sekarang coba teman-teman arahkan kursor nya ke tombol tersebut. Sudah?

Apa hasilnya ya? hasilnya adalah tidak terjadi apa-apa kan? nah betul sekali hehe, ini karena kita belum menerapkan pseude class hover pada elemen button yang sudah kita buat tadi.

Untuk menambahkannya cukup mudah, teman-teman tinggal membuat selector baru pada element yang sama lalu di ikuti oleh .nama-kelas:hover. Untuk lebih jelasnya coba perhatikan kode berikut:

.hover-button {
  /*...*/
}

.hover-button:hover {
  /* Other style here */
}

Nah teman-teman bisa menerapkan style lain di dalam blok yang memiliki :hover, seperti merubah warna, ukuran dan lain-lain. Contohnya: 

.hover-button {
  /*...*/
}

.hover-button:hover {
  background-color: pink;
}

Sekarang coba teman-teman buka kembali hasilnya dan arahkan kursor nya ke elemen button tadi, hasilnya bagaimana? warna background akan berubah menjadi pink ya. Yap betul sekali, jadi seperti itu cara kerja :hover pada sebuah element.

Pseude class :hover juga bisa di terapkan pada elemen teks, div, a dan lain-lain.

info

Source code pada chapter ini tersedia di GitHub.
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.1-hover