Hover dan Active

Tombol yang tampilannya tidak berubah ketika kursor melintas terasa netral: apakah elemen ini bisa diklik? Pseudo-class :hover menjawab keraguan itu dengan menampilkan gaya khusus selama kursor berada di atas elemen, sedangkan :active menampilkan gaya selama elemen sedang ditekan. Keduanya merupakan keadaan (state) yang dikelola browser secara otomatis, tanpa JavaScript. Pada Chapter ini kita memasang kedua keadaan tersebut pada tombol dan tautan, menata urutan penulisan yang benar untuk tautan, dan menyiapkan jalur alternatif untuk perangkat sentuh.

Mengenali :hover dan :active #

:hover cocok dengan elemen yang sedang ditunjuk kursor — tautan, tombol, kartu, bahkan baris tabel. Selama kursor berada di atas elemen, aturan tetap berlaku; ketika kursor meninggalkannya, browser mengembalikan gaya dasar. Karena pergantian keadaan ini terjadi berulang-ulang, pasangkan :hover dengan transition singkat agar perubahan terasa halus, bukan menyentak.

:active bekerja pada jendela waktu yang lebih pendek: keadaan ini aktif di antara penekanan dan pelepasan tombol mouse, atau selama jari masih menekan layar. Tujuannya berbeda dari :hover — :hover menjawab “elemen ini dapat berinteraksi”, sedangkan :active menjawab “aksi sedang berlangsung”. Berikut gaya lengkap tombol yang memakai keduanya:

.tombol {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.tombol:hover {
  background-color: rgb(29, 78, 216);
}
.tombol:active {
  background-color: rgb(30, 64, 175);
}
.tombol:focus-visible {
  outline: 3px solid rgb(30, 64, 175);
  outline-offset: 2px;
}

Mari kita telaah aturan tersebut baris demi baris:

1. Baris 1–9 (.tombol): gaya dasar tombol — latar biru rgb(37, 99, 235), teks putih, sudut membulat 8px, dan transition 0,15 detik untuk perubahan background-color.
2. Baris 10–12 (:hover): ketika kursor melayang di atas tombol, latar berganti ke biru lebih gelap rgb(29, 78, 216). Transisi dari gaya dasar membuat perpindahan warnanya halus.
3. Baris 13–15 (:active): selama tombol ditekan, latar menggelap satu tingkat lagi ke rgb(30, 64, 175) sehingga pengguna melihat bahwa tekanannya diterima.
4. Baris 16–19 (:focus-visible): outline untuk navigasi keyboard — jalur alternatif yang kita bahas pada bagian akhir chapter ini.

Hasil di Browser:

Tombol dalam keadaan diam tampil dengan latar rgb(37, 99, 235), teks putih
rgb(255, 255, 255), sudut 8px, dan durasi transisi latar 0,15 detik.
Tautan contoh tampil biru rgb(29, 78, 216) pada keadaan :link, dan kartu
tampil tanpa bayangan (box-shadow none) sebelum kursor melayang di atasnya.

Urutan LVHA untuk Tautan #

Tautan memiliki empat keadaan sekaligus, dan CSS menyediakan pseudo-class untuk masing-masing: :link (belum dikunjungi), :visited (pernah dikunjungi), :hover, dan :active. Keempatnya memiliki specificity yang sama — satu pseudo-class — sehingga urutan penulisan menentukan pemenang ketika satu tautan berada dalam beberapa keadaan sekaligus, misalnya tautan lama yang sedang di-hover. Konvensi yang dipegang luas adalah urutan Link → Visited → Hover → Active (LVHA):

a:link    { color: rgb(29, 78, 216); }
a:visited { color: rgb(124, 58, 237); }
a:hover   { color: rgb(30, 64, 175); }
a:active  { color: rgb(15, 23, 42); }

1. :link dan :visited ditulis lebih dahulu karena keduanya tidak saling bersaing — satu tautan hanya berada pada salah satunya.
2. :hover ditulis setelah keduanya supaya tautan yang pernah dikunjungi tetap memperoleh warna hover; bila urutannya dibalik, :visited menimpa :hover dan tautan lama tidak lagi bereaksi terhadap kursor.
3. :active ditulis paling akhir supaya umpan balik tekan tetap terlihat meskipun tautan sedang di-hover.

Perangkat Sentuh dan Keyboard #

:hover bergantung pada kursor, dan kursor tidak ada di layar sentuh. Perilakunya di sana tidak konsisten: sebagian browser menerapkan :hover pada sentuhan pertama, sebagian menampilkannya sesaat sebelum aksi klik, dan sebagian tidak menerapkannya sama sekali. Karena itu jangan menyembunyikan informasi penting di balik :hover semata — informasi yang hanya muncul saat kursor melayang tidak akan pernah ditemukan oleh sebagian pengguna.

Solusinya telah kita sisipkan pada contoh tombol di atas: aturan :focus-visible menampilkan outline biru ketika tombol menerima fokus keyboard. Pada perangkat sentuh, sentuhan pertama juga umumnya memicu fokus, sehingga keadaan ini menjadi jalur kedua yang dapat diandalkan. Keputusan praktisnya ringkas: :hover untuk penyempurnaan visual, :focus-visible untuk akses, dan :active untuk konfirmasi tekan.

Demo chapter ini (tombol-interaksi.html) memuat tombol, tautan dengan urutan LVHA, dan kartu yang memperoleh bayangan ketika di-hover. Probe otomatis memeriksa gaya dasar ketiganya — latar dan warna teks tombol, sudut 8px, durasi transisi 0,15 detik, warna tautan rgb(29, 78, 216), serta kartu tanpa bayangan — sehingga perubahan yang diklaim di atas dapat dibandingkan saat uji manual.

.tombol {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.tombol:hover {
  background-color: rgb(29, 78, 216);
}
.tombol:active {
  background-color: rgb(30, 64, 175);
}
.tombol:focus-visible {
  outline: 3px solid rgb(30, 64, 175);
  outline-offset: 2px;
}