Pseudoclassi :hover CSS

Definizione e uso

CSS :hover I pseudoclassi sono utilizzati per selezionare gli elementi quando il mouse è sopra.

Suggerimento::hover I pseudoclassi possono essere utilizzati per tutti gli elementi, non solo per i link.

Suggerimento:Utilizza :link Imposta lo stile dei link delle pagine non visitate utilizzando :visited Imposta lo stile dei link delle pagine visitate utilizzando :active Imposta lo stile dei link attivi.

Attenzione:Nella definizione CSS,:hover Deve essere messo dentro :link e :visited(se esistente) prima di diventare efficace!

Esempio

Esempio 1

Seleziona e imposta lo stile dei link quando il mouse è sopra:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Prova personalmente

Esempio 2

Seleziona e imposta lo stile degli elementi <p>, <h1> e <a> quando il mouse è sopra:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Prova personalmente

Esempio 3

Seleziona e imposta gli stili per i collegamenti non visitati, visitati, hover e attivi:

/* Collegamento non visitato */
a:link {
  color: green;
}
/* Collegamento visitato */
a:visited {
  color: green;
}
/* Collegamento hover */
a:hover {
  color: red;
}
/* Collegamento attivo */
a:active {
  color: yellow;
}

Prova personalmente

Esempio 4

Imposta stili diversi per i collegamenti:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Prova personalmente

Esempio 5

Hover sul elemento <span> per visualizzare l'elemento <div> (simile a un tooltip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Prova personalmente

Esempio 6

Mostra e nasconde il menu a discesa al passaggio del mouse:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Prova personalmente

Sintassi CSS

:hover {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente la pseudo-classe.

Pagine correlate

Guida:Collegamenti CSS

Guida:Pseudo-classe CSS