:hover

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.

Passa sopra questo link

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