CSS Hover Selector Dijelaskan (dengan Contoh)

:hoverPemilih CSS adalah salah satu dari banyak kelas semu yang digunakan untuk mengatur gaya elemen. :hoverdigunakan 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, :hoversering dipasangkan dengan :link, :visited, dan :activepenyeleksi yang gaya belum dikunjungi, mengunjungi, dan link aktif, masing-masing.

Jika :linkdan :visitedaturan ada dalam definisi CSS, :hoverharus mengikuti mereka. Jika tidak, gaya dalam :hoveraturan 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 :hoverpemilih akan menjadi aktif dan gaya tombol akan berubah.

Perhatikan bahwa ini :hoverbisa 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 :hoversebanyak mungkin browser dan perangkat seluler yang berbeda.