Pseudo Clases :link, :active, :hover y :visited

Pseudo Clases :link, :active, :hover y :visited

Print Friendly, PDF & Email
Pseudo Clases :link, :active, :hover y :visited
Valora esta entrada
Las pseudoclases son selectores que definen el estado de una etiqueta.

Veremos en concreto estas 4.

:active, :hover, :link, :visited

Podemos clasificarlas según:

  1. Válidas para cualquier etiqueta. :hover y :active
  2. Sólo validas para etiquetas de tipo enlace. :link, :visited

Tienen las siguientes utilidades:

  • :hover, indica una etiqueta cuyo estado es tener el ratón encima. Sirve para cualquier etiqueta.
  • :active, indica una etiqueta cuyo estado es tener el ratón pulsado encima. Sirve para cualquier etiqueta.
  • :visited, indica un enlace que ya ha sido visitado previamente. Sólo sirve con etiquetas de tipo <a>
  • :link, indica que un enlace todavía no ha sido visitado. Sólo sirve con etiquetas de tipo <a>.

Veámoslo con un ejemplo:

(querido usuario, si lo estás leyendo en versión para teléfono, la versión AMP puede hacer que no se visualice bien el ejemplo a continuación)

Fijaros que en el ejemplo hay un div y dos enlaces.

  • En el <div> hover y active surgen efecto. Link no hace nada.
  • En los <a> hover, active y link surgen efecto.
  • A efectos prácticos se ha omitido active.  Active lo que haría es mantener un enlace de color amarillo si este ya se ha visitado alguna vez previamente.

El código CSS del ejemplo es el siguiente:

*{box-sizing:border-box;}

a{text-decoration:none;color:#000;}

a,div{border:1px solid #000;padding:16px;width:120px;display:inline-block;text-align:center;}

a:hover, div:hover{
background-color:red;
}

a:active, div:active{
background-color:blue;
}

a:visited, div:visited{
/*background-color:yellow;⁄*/
}

a:link, div:link{
background-color:green;
}

¡Hola!

Querido lector,

Una vez vistas estas pseudoclases te recomiendo que hagas el ejercicio de creación de un menú simple y el de menú desplegable.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 44
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Resumen de como comentar código en html, css y javascript
- 311
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Elementos en línea. Elementos bloque. Elementos inline-block.
- 217
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Como centrar un texto mediante CSS y no con HTML
- 162
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 56
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Unidades de medida absolutas y relativas en CSS
- 166
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Maquetar una página de prestashop 1.6 con bootstrap
- 319
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Box Sizing, como modificar el modelo de cajas convencional
- 76
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.