Pseudo-class :hover

Sebuah tombol yang tidak bereaksi ketika kursor melintasinya terasa seperti gambar, bukan kontrol yang bisa dipakai. Pseudo-class :hover adalah cara paling dasar untuk memberi umpan balik itu: elemen berubah tampilan selama kursor berada di atasnya, tanpa satu baris JavaScript pun. Pada chapter ini kita memahami kapan :hover aktif, menyusun resep hover untuk tombol, tautan, dan kartu, lalu membahas kehati-hatian pentingnya pada perangkat sentuh dan keyboard.

Cara Kerja :hover #

:hover adalah pseudo-class: selector tambahan yang mencocokkan state elemen, ditulis menempel pada selector biasa. Browser mengevaluasi pseudo-class ini terus-menerus; begitu kursor masuk ke area elemen, aturan cocok, dan begitu kursor keluar, aturan berhenti berlaku secara otomatis.

.tombol-utama {
  background-color: #1f6f54;
  color: #fdfaf3;
}

.tombol-utama:hover {
  background-color: #14503a;
}

Arahkan kursor ke tombol berikut: begitu kursor masuk area tombol, aturan :hover cocok, dan begitu kursor menjauh, gaya dasar berlaku lagi.

Mari kita telusuri strukturnya:

1. .tombol-utama: selector class yang mengatur tampilan dasar tombol, berlaku pada semua state.
2. :hover: pseudo-class yang menempel pada selector; polanya selalu selector:hover.
3. background-color: #14503a;: hanya deklarasi yang berbeda perlu ditulis ulang pada state hover; properti lain diwarisi dari aturan dasar.

Perubahan yang umum dipakai pada hover: menggelapkan atau mencerahkan warna, menambah bayangan, sedikit menggeser atau memperbesar dengan transform, serta memunculkan garis bawah pada tautan.

Resep Hover untuk Tombol, Tautan, dan Kartu #

Tombol dengan bayangan terangkat — warna menggelap dan bayangan memanjang seolah tombol naik mendekat:

.tombol-simpan {
  background-color: #1f6f54;
  box-shadow: 0 1px 2px rgb(13 59 42 / 0.35);
}

.tombol-simpan:hover {
  background-color: #14503a;
  box-shadow: 0 5px 14px rgb(13 59 42 / 0.28);
  transform: translateY(-1px);
}

Tautan teks — garis bawah baru muncul saat kursor mengarah, sehingga teks tetap bersih namun tetap jelas sebagai tautan:

.tautan-artikel {
  color: #1f6f54;
  text-decoration: none;
}

.tautan-artikel:hover {
  text-decoration: underline;
}

Kartu produk — seluruh kartu terasa naik dengan bayangan lebar; transition membuat perpindahannya halus, dan topik itu kita bahas tuntas di section Transitions dan Animations:

.kartu-produk {
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.kartu-produk:hover {
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.14);
  transform: translateY(-3px);
}

Coba dua resep terakhir secara langsung — arahkan kursor ke tombol dan kartu berikut:

Satu detail yang sering berguna: :hover pada elemen induk ikut cocok saat kursor berada di atas anaknya. Mengarahkan kursor ke teks di dalam kartu berarti juga meng-hover kartunya. Sifat ini yang membuat pola berikut bekerja — anak bereaksi ketika induknya diarahkan:

.kartu-produk:hover .judul-kartu {
  text-decoration: underline;
}

Pola induk-memicu-anak ini dipakai luas untuk menu dropdown dan tombol ikon yang hanya muncul saat kartu diarahkan.

:hover pada Perangkat Sentuh dan Keyboard #

Pada ponsel dan tablet, tidak ada kursor yang melayang. Ketukan jari hanya menyentuh layar sesaat, sehingga gaya :hover tidak pernah benar-benar terlihat — sebagian browser menampilkannya kilat sesaat atau membuatnya menempel setelah ketukan, dan keduanya tidak bisa diandalkan. Karena itu, anggap :hover sebagai bonus untuk pengguna mouse, bukan satu-satunya jalur umpan balik.

Pola aman yang akan kita pakai sepanjang section ini: :hover untuk pengguna mouse, :focus-visible untuk navigasi keyboard, dan :active untuk momen tekan. Ketiganya dibahas berurutan pada chapter-chapter berikutnya.

Kesalahan Umum #

Ringkasan #

:hover mencocokkan elemen selama kursor berada di atasnya dan menjadi dasar semua umpan balik antarmuka yang kita susun di section ini. Resep tombol, tautan, dan kartu di atas cukup untuk mayoritas kebutuhan, selama kita ingat dua batasannya: perangkat sentuh tidak punya hover, dan pengguna keyboard membutuhkan :focus-visible. Chapter berikutnya membahas state fokus secara khusus — bagaimana membedakan fokus dari klik dan fokus dari keyboard.