Estados: :hover, :focus-visible, :active y compañía

Una interfaz sin estados es un maniquí: bonita pero muerta. Los estados — el botón que responde al mouse, el input que muestra dónde estás escribiendo — son la mitad de la sensación de "calidad" de un sitio. Este módulo abre con ellos, y con la distinción que separa al maquetador moderno: :focus vs :focus-visible.

Los estados del ciclo de interacción

<div class="fila">
<button class="btn">Pasa, enfoca, presiona</button>
<button class="btn" disabled>Deshabilitado</button>
<a class="enlace" href="#">Un enlace con sus estados</a>
</div>
<p class="nota">Prueba con mouse Y con Tab: el anillo de foco solo aparece con teclado.</p>

body { font-family: system-ui; padding: 24px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { background: #6d28d9; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #5b21b6; }
.btn:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.btn:active { transform: scale(0.97); }
.btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }
.enlace { color: #6d28d9; font-weight: 600; }
.enlace:hover { text-decoration-thickness: 3px; }
.enlace:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; border-radius: 2px; }
.nota { font-size: 12px; color: #64748b; margin-top: 12px; }

:focus vs :focus-visible: la distinción que importa

:focus se activa con CUALQUIER foco — también el clic del mouse. Durante años eso produjo anillos de foco tras cada clic, y la "solución" de la época fue el crimen de accesibilidad más común de la web: outline: none — que dejó a los usuarios de teclado navegando a ciegas.

:focus-visible es la reconciliación: el navegador aplica el anillo SOLO cuando el foco llegó por teclado (o cuando el usuario lo necesita). Mouse: sin anillo. Tab: anillo bien visible. Nadie pierde.

Los estados de los enlaces: el orden LVHA

Los enlaces suman :visited (ya lo visitaste) y son sensibles al ORDEN de las reglas — misma especificidad, gana la última (cascada, módulo 3). El orden que funciona: Link, Visited, Hover, Active ("LoVe-HAte" como mnemónico clásico):

Y dos estados de formulario que ya usaste sin nombrarlos: :checked (el checkbox hack del módulo 8 — lo explotaremos a fondo en el reto final) y :disabled con su primo :enabled.

Mini-reto

Dale a tu periódico el kit completo: hover con color-mix (módulo 4) en botones y enlaces, :focus-visible con anillo del acento en TODO lo interactivo, :active con scale(0.97). Luego suelta el mouse y navega la portada entera con Tab — si siempre sabes dónde estás, aprobaste.

Qué sigue

Estados dominados. La próxima lección selecciona por POSICIÓN: first-child, last-child y el poderoso :nth-child con sus fórmulas an+b — cebrear tablas y ritmar galerías sin tocar el HTML.