:hover
Pemilih CSS adalah salah satu dari banyak kelas semu yang digunakan untuk mengatur gaya elemen. :hover
digunakan untuk memilih elemen tempat pengguna mengarahkan kursor atau mouse ke atas. Ini dapat digunakan di semua elemen, tidak hanya di link.
Ketika digunakan untuk gaya link, :hover
sering dipasangkan dengan :link
, :visited
, dan :active
penyeleksi yang gaya belum dikunjungi, mengunjungi, dan link aktif, masing-masing.
Jika :link
dan :visited
aturan ada dalam definisi CSS, :hover
harus mengikuti mereka. Jika tidak, gaya dalam :hover
aturan tidak akan diterapkan ke elemen yang dipilih.
Sintaksis:
a:hover { /* CSS declarations */ }
Pemilih hover hanya menerapkan gaya yang disediakan dalam aturan ketika sebuah elemen memasuki keadaan hover. Ini biasanya terjadi saat pengguna mengarahkan kursor ke elemen dengan mouse mereka.
button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }
Pada contoh di atas, gaya normal tombol adalah teks putih pada tombol hijau. Saat pengguna mengarahkan kursor ke tombol dengan mouse mereka, aturan dengan :hover
pemilih akan menjadi aktif dan gaya tombol akan berubah.
Perhatikan bahwa ini :hover
bisa menjadi masalah pada layar sentuh - implementasi perangkat keras dan browser seluler yang berbeda dapat menyebabkan pseudo-class dipicu dalam beberapa kasus dan tidak di kasus lain. Pastikan untuk menguji elemen secara menyeluruh dengan :hover
sebanyak mungkin browser dan perangkat seluler yang berbeda.