Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

:link, :visited, :hover y :active CSS

Las pseudo clases :link:visited:hover y :active son de las primeras pseudo clases implementadas en CSS.

La pseudo clase :link

La pseudo clase :link se utiliza para seleccionar y dar estilo a los enlaces que no fueron visitados. Importante: la pseudo clase :link selecciona solo a los elementos <a> que tienen un atributo href.
  <!-- :link selecciona este elemento -->
  <a href="http://w3.unpocodetodo.info">unpocodetodo.info</a>
  
  <!-- :link no selecciona este elemento -->
  <a>No hay atributo hrefe</a>

La pseudo clase ::visited

La pseudo clase ::visited se utiliza para seleccionar y dar estilo a los enlaces que ya fueron visitados.
a:visited {
      color:#0f0;
}

La pseudo clase ::hover

La pseudo clase ::hover se utiliza para seleccionar y dar estilo al pasar con el ratón por encima de un elemento, y se utiliza normalmente para enlaces <a> pero puede ser utilizada también para otros elementos. 
img:hover {
      transform: scale(1.5);
}

La pseudo clase :active

La pseudo clase :active especifica y selecciona un elemento activo, y se utiliza normalmente para enlaces <a> pero puede ser utilizada para otros elementos. Decimos que el elemento es activo cuando el usuario hace clic en este elemento pero antes de levantar el dedo del botón del ratón: o sea en "mousedown".
p:active {
   color: #f00;
}
Cuando utilizamos la pseudo clase :active  para un enlace, la utilizamos junto con :link:visited, y :hover.
Hay que tener en cuenta que un elemento puede recibir estilos de dos pseudo clases a la vez: :visited y :active o :link y :active. Para no sobreescribir los estilos, cuando utilizamos las cuatro pseudo clases mencionadas arriba, normalmente las ponemos en el siguiente orden:
a:link {
      /* estilos  */
  }
a:visited {
      /* estilos */
  }
a:hover {
      /* estilos */
  }
a:active {
      /* estilos */
  }

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas