: hover adalah kelas pseudo yang digunakan untuk memilih dan memberi style pada elemen ketika pointer berada di elemet tersebut oleh pengguna. Sebuah elemen melayang (hovered) ketika pengguna menunjuknya dengan perangkat penunjuk — seperti menunjuknya dengan menempatkan mouse di atasnya — tanpa perlu mengaktifkannya.

Sebagian besar perangkat sentuh tidak mendukung interaksi mengambang. Menggunakan: arahkan kursor ke perangkat sentuh dapat menyebabkan masalah seperti efek dan interaksi yang tidak terduga. Ini karena: status mengambang dari suatu elemen kadang-kadang dipicu selama sepersekian detik ketika elemen disentuh.

: hover adalah kelas pseudo dinamis yang cocok ketika elemen sedang dibidik oleh pengguna. Ini biasanya digunakan untuk memberi masukan visual kepada pengguna bahwa elemen yang mereka tunjuk telah benar-benar melayang dan mungkin diaktifkan. Ini juga digunakan untuk menampilkan konten sekunder ketika elemen-elemen tertentu melayang. Sebagai contoh, sangat umum untuk menggunakan melayang di atas daftar item dalam menu navigasi untuk membuka submenu dari item itu.

: hover juga digunakan bersama dengan pseudo-class lain untuk menata link di suatu halaman. Empat kelas yang digunakan untuk menautkan tautan meliputi:

  • :link
  • :visited
  • :hover
  • :active

Ketika empat link styling pseudo-class digunakan, mereka lebih disukai digunakan dalam urutan yang disebutkan di atas. Sebagai contoh:

 

CSS :hover dapat dikesampingkan oleh style pseudo-classes lainnya tergantung pada urutan kemunculannya dalam style sheet. Agar dapat menautkan tautan dengan tepat dan menghindari gaya tertentu untuk dikesampingkan oleh yang lain, disarankan agar keempat kelas semu digunakan dalam urutan yang tercantum di atas.

Urutan dapat dengan mudah diingat menggunakan mnemonik, seperti “Last Vintage Hat Available”. Anda dapat membuatnya sendiri di spacefm.com.

Selain empat kelas pseudo yang disebutkan,: fokus pseudo-class juga digunakan untuk menata link yang sedang difokuskan (tab pada menggunakan keyboard). Jika: fokus pseudo-class akan digunakan, biasanya ditempatkan sebelum: hover styles di style sheet. Dan untuk mengingat pesanan, Anda bisa menambahkan “bulu” di antara kalimat sebelumnya: “Terakhir Topi Bulu Vintage Tersedia”.

Contoh: