Docs ejecutables de CSS: Hover en CSS

Q: ¿Cómo agrego un efecto hover en CSS?

Escribe una regla con :hover después del selector: .btn:hover { background: #1d4ed8; }. Las declaraciones se aplican mientras el puntero está sobre el elemento. Agrega transition: background 0.2s; a la regla normal para animar el cambio.

Q: ¿Qué diferencia hay entre :hover y :active?

:hover se aplica mientras el puntero está sobre el elemento. :active se aplica mientras se está presionando, desde que se baja el botón del mouse hasta que se suelta. Un botón presionado suele estar en hover y en active a la vez.

Q: ¿En qué orden van las pseudoclases de los enlaces?

:link, :visited, :hover, :active (recuerda LVHA, o "LoVe HAte" en inglés). Tienen la misma especificidad, así que gana la regla posterior; en cualquier otro orden, un estilo de visitado o de hover puede ocultar el estilo de hover o de active.

Q: ¿Cómo cambio el color de los enlaces en CSS?

Da estilo al elemento a: a { color: #2563eb; }, y luego a:visited { color: #7c3aed; } y a:hover { color: #1d4ed8; } para los otros estados. Definir color en a cubre tanto los enlaces no visitados como los visitados.

Cómo funciona :hover

:hover es una pseudoclase que selecciona un elemento mientras el puntero del mouse está encima. Agrégala a cualquier selector y escribe los estilos del estado hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Solo cambian las declaraciones de la regla :hover; todo lo demás se mantiene de .btn. Cuando el puntero sale, el elemento vuelve a sus estilos normales.

Efectos hover suaves con transition

Un cambio en hover es instantáneo salvo que agregues transition a la regla normal (no a la regla :hover), para que se anime tanto al entrar como al salir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform y opacity son las propiedades más baratas de animar; no mueven los elementos que las rodean. Animar width, height o margin hace que la página recalcule el layout en cada fotograma. Las duraciones, los retrasos y las curvas de aceleración están en la página de transition en CSS.

Colores de enlaces: :link, :visited, :hover, :active

Los enlaces tienen cuatro estados clásicos, más el foco del teclado, y el orden de las reglas importa:

Pseudoclase	Se aplica cuando
`:link`	El enlace no se ha visitado
`:visited`	La URL está en el historial del navegador
`:hover`	El puntero está encima
`:active`	Se está presionando
`:focus-visible`	Tiene el foco del teclado

Todas tienen la misma especificidad, así que gana la regla posterior cuando coinciden dos. Un enlace visitado en hover coincide con :visited y con :hover; si :visited va al final, el color de hover nunca se ve. El orden seguro es Link, Visited, Hover, Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Los navegadores limitan lo que :visited puede cambiar, para que las páginas no lean tu historial. Solo tienen efecto las propiedades relacionadas con el color (color, background-color, border-color, outline-color y algunas más), y los scripts siempre ven el valor de no visitado.

:active: el estado presionado

:active coincide mientras el elemento se está presionando. Un pequeño movimiento hace que un botón se sienta físico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Hover en el padre para dar estilo a un hijo

El estado hover pertenece al elemento que está bajo el puntero y a todos sus ancestros. Así, .card:hover .title da estilo al título cuando cualquier parte de la tarjeta está en hover, y la misma idea sirve para mostrar elementos ocultos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

La línea de :focus-within importa: sin ella, un usuario de teclado que llega con Tab al botón Delete presionaría un botón invisible. Acompaña cada elemento que aparece con hover con una regla de foco.

Hover en pantallas táctiles

Los teléfonos y las tablets no tienen un puntero que se quede sobre un elemento. La mayoría de los navegadores móviles aplican :hover en el primer toque y lo mantienen hasta que tocas en otro lugar, así que un estilo hover puede quedar pegado. Dos reglas lo mantienen bajo control:

Nunca pongas detrás de :hover la única forma de llegar a un contenido. Un menú que se abre con hover también tiene que abrirse con un clic.
Envuelve los efectos hover puramente decorativos en una media query que compruebe si hay un dispositivo con hover real:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Errores comunes

Un espacio antes de los dos puntos. .btn :hover significa "un elemento en hover dentro de .btn". Escribe .btn:hover.
transition solo en la regla :hover. Así se anima al entrar pero vuelve de golpe al salir. Ponla en la regla normal.
Orden incorrecto en los enlaces. Mantén :link, :visited, :hover, :active en ese orden.
Hover sin estilo de foco. Los usuarios de teclado nunca activan :hover; dales también a los elementos interactivos un estilo :focus-visible.
Hover en un elemento tapado por otro. Una capa invisible encima (a menudo un pseudoelemento absoluto) puede capturar el puntero. pointer-events: none en esa capa lo soluciona.

Preguntas frecuentes

¿Cómo agrego un efecto hover en CSS?

Escribe una regla con :hover después del selector: .btn:hover { background: #1d4ed8; }. Las declaraciones se aplican mientras el puntero está sobre el elemento. Agrega transition: background 0.2s; a la regla normal para animar el cambio.

¿Qué diferencia hay entre :hover y :active?

:hover se aplica mientras el puntero está sobre el elemento. :active se aplica mientras se está presionando, desde que se baja el botón del mouse hasta que se suelta. Un botón presionado suele estar en hover y en active a la vez.

¿En qué orden van las pseudoclases de los enlaces?

:link, :visited, :hover, :active (recuerda LVHA, o "LoVe HAte" en inglés). Tienen la misma especificidad, así que gana la regla posterior; en cualquier otro orden, un estilo de visitado o de hover puede ocultar el estilo de hover o de active.

¿Cómo cambio el color de los enlaces en CSS?

Da estilo al elemento a: a { color: #2563eb; }, y luego a:visited { color: #7c3aed; } y a:hover { color: #1d4ed8; } para los otros estados. Definir color en a cubre tanto los enlaces no visitados como los visitados.

¿El hover funciona en el celular?

Las pantallas táctiles no tienen un puntero que se quede sobre un elemento. La mayoría de los navegadores móviles aplican :hover al tocar y lo mantienen hasta que tocas en otro lugar, lo que puede dejar un estilo hover pegado. Envuelve los efectos que son solo de hover en @media (hover: hover) y nunca escondas contenido esencial detrás de un hover.

Conceptos relacionados