Pseudoclases para el ratón

Una pseudoclase no es una clase que se escriba en el HTML: es un estado que el navegador conoce por sí solo y que se puede aprovechar desde el CSS. Se escribe con dos puntos pegados al selector, sin espacio:

.boton { background: gris; } /* estado normal */ .boton:hover { background: azul; } /* con el ratón encima */

El HTML no cambia en absoluto. Lo único que se añade es una regla más en el CSS.

Las cuatro de los enlaces

:link

Cuándo se aplica

A un enlace que el usuario no ha visitado todavía. Es el estado de partida de cualquier <a> con href.
:visited

Cuándo se aplica

A un enlace que ya se ha visitado. Es lo que hace que los enlaces cambien de color después de pinchar en ellos, un detalle de orientación que conviene no eliminar.

Una limitación que sorprende

Por motivos de privacidad, los navegadores solo permiten cambiar unas pocas propiedades en este estado: el color, el color de fondo y el del borde. No se puede cambiar el tamaño, ni la tipografía, ni añadir contenido. Si se pudiera, una web podría averiguar qué páginas ha visitado el visitante midiendo el tamaño de sus enlaces.
:hover

Cuándo se aplica

Mientras el puntero del ratón está encima del elemento. Es la más usada de todas, y no solo en enlaces: funciona en cualquier caja.

Un aviso importante

En un móvil o una tableta no hay ratón, así que no hay :hover de verdad. Nunca se pone en este estado información que haga falta para entender la página o para poder navegarla: solo refuerzos visuales.

Pruébalo: pasa el ratón por encima.
```
<a href="#" class="enlace">Un enlace</a>
<span class="caja">Una caja cualquiera</span>
```
```
.enlace,
.caja {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 8px;
  border: 1px solid #7a7a9a;
  background: #e8e8f2;
  color: #2a2a55;
  text-decoration: none;
  font-family: Verdana, sans-serif;
  transition: all 150ms;
}

.enlace:hover,
.caja:hover {
  background: #2a2a55;
  color: #fff;
}
```
:active

Cuándo se aplica

Durante el instante en que se está pulsando: entre que se aprieta el botón del ratón y se suelta. Dura décimas de segundo.

Para qué sirve

Para que el elemento responda al clic y el usuario note que ha pulsado de verdad. Lo habitual es oscurecerlo o desplazarlo un par de píxeles, como si se hundiera.

Pruébalo: mantén pulsado el botón sin soltar.
```
<span class="boton">Mantén pulsado aquí</span>
```
```
.boton {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #7a7a9a;
  background: #e8e8f2;
  color: #2a2a55;
  font-family: Verdana, sans-serif;
  transition: all 150ms;
}

.boton:hover  { background: #2a2a55; color: #fff; }

.boton:active {
  background: #88887a;
  transform: translateY(2px);   /* como si se hundiera */
}
```

El orden importa, y mucho

Las cuatro tienen que escribirse en este orden en la hoja de estilos: :link, :visited, :hover, :active. Si se cambia, las últimas pisan a las primeras y parece que el CSS no funciona. El truco para acordarse es LoVe HAte: Link, Visited, Hover, Active.

a:link    { color: #2a2a55; }
a:visited { color: #6a3a7a; }
a:hover   { color: #c0392b; }
a:active  { color: #000000; }

El fallo típico es poner :hover antes que :visited: los enlaces ya visitados dejan de reaccionar al ratón y nadie entiende por qué.

La del teclado

:focus
Cuándo se aplica

Cuando el elemento tiene el foco: se ha llegado a él con la tecla del tabulador, o se ha pinchado dentro de un campo de formulario.

Por qué no es opcional

Hay personas que navegan sin ratón, solo con el teclado. El recuadro que marca el foco es lo único que les dice dónde están. Los navegadores lo dibujan solos; borrarlo con outline: none sin poner nada en su lugar deja la página inutilizable para esas personas.

Lo correcto
Si no gusta el recuadro del navegador, se sustituye por otra marca bien visible, nunca se elimina sin más:
```
a:focus {
  outline: 3px solid #c0392b;
  outline-offset: 2px;
}
```
```
<a href="#" class="enlace">Llega aquí con el tabulador</a>
```
```
.enlace {
  display: inline-block;
  padding: 8px 16px;
  color: #2a2a55;
  font-family: Verdana, sans-serif;
}

.enlace:focus {
  outline: 3px solid #c0392b;
  outline-offset: 2px;
}
```

Que el cambio no sea brusco

transition

Sin ella, el cambio de estado es instantáneo y da un respingo. Con ella, el color o la posición viajan suavemente de un valor a otro.

.boton       { background: #e8e8f2; transition: all 150ms; }
.boton:hover { background: #2a2a55; }

Dónde se escribe

En el estado normal, no en el :hover. Es el error más repetido. Puesta en el estado normal, la transición funciona al entrar y al salir; puesta dentro del :hover, solo suaviza la entrada y el regreso es seco.

Resumen

Pseudoclase	Cuándo se activa	Cuánto dura
`:link`	enlace sin visitar	hasta que se visita
`:visited`	enlace ya visitado	mientras quede en el historial
`:hover`	el ratón está encima	mientras no se aparte
`:active`	se está pulsando	décimas de segundo
`:focus`	se ha llegado con el tabulador	hasta pasar al siguiente

Pseudoclase

Cuándo se activa

Cuánto dura

:link

enlace sin visitar

hasta que se visita

:visited

enlace ya visitado

mientras quede en el historial

:hover

el ratón está encima

mientras no se aparte

:active

se está pulsando

décimas de segundo

:focus

se ha llegado con el tabulador

hasta pasar al siguiente