États des liens en CSS

Je pense qu'en visitant différents sites sur Internet, vous avez remarqué que les liens réagissent généralement au survol de la souris. Un tel effet peut être obtenu en définissant le comportement des liens dans différents états.

Par exemple, comme ceci - a:hover - nous attrapons l'état lorsque le curseur de la souris survole le lien. À ce moment, nous pouvons, par exemple, changer la couleur du lien ou supprimer/ajouter son soulignement. La construction :hover s'appelle un pseudo-classe. Les pseudo-classes permettent de capturer différents états des éléments.

En plus de :hover, il existe d'autres pseudo-classes comme :link, qui capture un lien non visité, et :visited, qui capture un lien visité. Sur certains sites, elles sont utilisées pour montrer aux utilisateurs où ils sont déjà allés et où ils ne sont pas allés. Il y a aussi la pseudo-classe :active, qui capture l'état suivant : un clic de souris est maintenu sur l'élément, mais n'a pas encore été relâché.

Dans l'exemple suivant, pour un lien dans l'état :hover, le soulignement est supprimé, dans l'état :link une couleur rouge est définie, dans l'état :visited - vert, dans l'état :active - bleu clair. Le résultat sera qu'au début le lien sera de couleur rouge, après avoir cliqué dessus - vert, si vous cliquez dessus avec la souris et maintenez enfoncé - bleu clair, et si vous survolez avec la souris - il deviendra non souligné :

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

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