CSS: Pseudoclases de estado (link, visited, hover, active, focus).


Para conseguir que algunos enlaces cambien de color cuando ya estuviste en esa página, cuando los mantienes pulsados o se modifica su estilo cuando pasas el ratón por encima de ellos se utiliza el carácter “:” 

El estado :link, solo aplicable a enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla.

El estado :visited se aplicará a los hipervínculos visitados, es el selector complementario a :link.

El estado :hover modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla.

Importante:
En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente.

El estado :active se aplica a enlaces que están siendo pulsados. Normalmente no mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para casos particulares como pueden ser los menús desplegables.
Al pulsar se activa el estilo definido por esta regla de CSS, y al dejar de pulsar se deja de aplicar la regla. Es necesario declarar :active después de :hover, para que tenga efecto.

Utilizamos el selector :focus para mejorar la experiencia del usuario, ya que puede ser una buena práctica resaltar los campos de
formulario que están siendo utilizados en cada momento.

 
 Fuente: Activate, Google España
 

Comentarios

Entradas populares de este blog

Códigos Hex de color

Enlaces Intradocumentales

Etiqueta header HTML5