Stati dei link in CSS

Penso che tu, visitando vari siti su internet, abbia notato che i link di solito reagiscono al passaggio del mouse su di essi. È possibile ottenere un tale effetto impostando il comportamento dei link nei vari stati.

Ad esempio, in questo modo - a:hover - intercettiamo lo stato in cui il puntatore del mouse è sopra il link. In quel momento possiamo, ad esempio, cambiare il colore del link o rimuovere/aggiungere la sottolineatura. La costruzione :hover si chiama pseudoclasse. Le pseudoclassi permettono di intercettare diversi stati degli elementi.

Oltre a :hover ci sono altre pseudoclassi :link, che intercettano un link non visitato, e :visited, che intercettano un link visitato. Su alcuni siti web con il loro aiutosi mostra agli utenti dove sono stati e dove no. C'è anche la pseudoclasse :active, che intercetta il seguente stato: il mouse è stato cliccato sull'elemento, ma non è ancora stato rilasciato.

Nel seguente esempio, per il link nello stato :hover viene rimossa la sottolineatura, nello stato :link viene impostato il colore rosso, nello stato :visited - verde, nello stato :active - azzurro. Di conseguenza, all'inizio il link sarà di colore rosso, dopo averci cliccato sopra - verde, se si clicca su di esso con il mouse e non si rilascia - azzurro, e se si passa il mouse sopra - diventerà non sottolineato:

cssa:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: blue;
}

html<a href="#">link</a>

Результат: