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

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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

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)[vc_raw_html]JTNDc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjNlamVtcGxvJTIwJTJBJTdCYm94LXNpemluZyUzQWJvcmRlci1ib3glM0IlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjNlamVtcGxvJTIwJTIwYSU3QnRleHQtZGVjb3JhdGlvbiUzQW5vbmUlM0Jjb2xvciUzQSUyMzAwMCUzQiU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyM2VqZW1wbG8lMjBhJTJDJTIzZWplbXBsbyUyMGRpdiU3QmJvcmRlciUzQTFweCUyMHNvbGlkJTIwJTIzMDAwJTNCcGFkZGluZyUzQTE2cHglM0J3aWR0aCUzQTEyMHB4JTNCZGlzcGxheSUzQWlubGluZS1ibG9jayUzQnRleHQtYWxpZ24lM0FjZW50ZXIlM0IlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjNlamVtcGxvJTIwYSUzQWhvdmVyJTJDJTIzZWplbXBsbyUyMCUyMGRpdiUzQWhvdmVyJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwYmFja2dyb3VuZC1jb2xvciUzQXJlZCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyM2VqZW1wbG8lMjBhJTNBYWN0aXZlJTJDJTIzZWplbXBsbyUyMCUyMGRpdiUzQWFjdGl2ZSU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQtY29sb3IlM0FibHVlJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIzZWplbXBsbyUyMGElM0F2aXNpdGVkJTJDJTIzZWplbXBsbyUyMCUyMGRpdiUzQXZpc2l0ZWQlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlMkFiYWNrZ3JvdW5kLWNvbG9yJTNBeWVsbG93JTNCJUUyJTgxJTg0JTJBJTJGJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIzZWplbXBsbyUyMGElM0FsaW5rJTJDJTIzZWplbXBsbyUyMCUyMGRpdiUzQWxpbmslN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBiYWNrZ3JvdW5kLWNvbG9yJTNBZ3JlZW4lM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZzdHlsZSUzRSUwQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBpZCUzRCUyMmVqZW1wbG8lMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlM0VkaXYlM0MlMkZkaXYlM0UlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NhJTIwaHJlZiUzRCUyMiUyMyUyMiUzRVRleHRvJTIwZGUlMjBlbmxhY2UlMjAxJTNDJTJGYSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2ElMjBocmVmJTNEJTIyJTIzJTIyJTNFVGV4dG8lMjBkZSUyMGVubGFjZSUyMDIlM0MlMkZhJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGc3BhbiUzRQ==[/vc_raw_html]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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *