La pseudo-classe :hover consente, in CSS, di selezionare gli elementi quando il cursore del mouse (o un’altro dispositivo di puntamento) è sopra ad essi. Comunemente viene utilizzato con i link <a>.
a:hover {
color: red;
}Quindi, quando il puntatore del mouse passerà sopra ad un link con quello stile, esso diventerà rosso.
Per applicare lo stile ad un link correttamente, bisogna applicare i selettori seguendo la regola dell’ordine LVHA:
:link — :visited — :hover — :active
Nei browser moderni :hover funziona su qualsiasi elemento, ma su IE 6 e inferiori funziona solo sui link.
Il problema sui Touchscreen
La pseudo-classe :hover crea diversi problemi sui touchscreen. In base al browser l’hover potrebbe non essere mai attivato, attivarsi solo per un breve momento dopo che l’utente ha toccato un elemento o continuare a rimanere attivo anche dopo che l’utente ha smesso di toccare l’elemento, fino a quando non ne toccherà un’altro.
Link utili
Supporto dei Browser
[caniuse feature=”mdn-css_selectors_hover”]