Estados de los enlaces en CSS

Creo que ustedes, al visitar varios sitios web en internet, habrán notado que los enlaces generalmente reaccionan al pasar el cursor del ratón sobre ellos. Se puede lograr este efecto definiendo el comportamiento de los enlaces en varios estados.

Por ejemplo, así - a:hover - capturamos el estado cuando el cursor del ratón se posa sobre el enlace. En este momento podemos, por ejemplo, cambiar el color del enlace o quitar/agregar el subrayado. La construcción :hover se llama pseudoclase. Las pseudoclases permiten capturar diferentes estados de los elementos.

Además de :hover existen otras pseudoclases :link, que capturan un enlace no visitado, y :visited, que capturan un enlace visitado. En algunos sitios web se utilizan para mostrar a los usuarios dónde han estado y dónde no. También está la pseudoclase :active, que captura el siguiente estado: se ha hecho clic en el elemento con el ratón, pero aún no se ha soltado.

En el siguiente ejemplo, para el enlace en el estado :hover se elimina el subrayado, en el estado :link se define un color rojo, en el estado :visited - verde, en :active - azul claro. Como resultado, al principio el enlace será de color rojo, después de hacer clic en él - verde, si se hace clic sobre él con el ratón y no se suelta - azul claro, y si se pasa el cursor del ratón - se volverá no subrayado:

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

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