Hover en interfaces: qué es, tipos de efectos e implementación

Qué es hover en diseño web

Hover (del inglés “to hover”) — es una reacción visual de un elemento de interfaz cuando el cursor del ratón se sitúa sobre él. El término se utiliza para referirse tanto a la pseudoclase CSS :hover como al estado del elemento al pasar el ratón.

El concepto de hover se originó en las primeras interfaces gráficas del Xerox Alto (1973) y se estandarizó en la web con la introducción de CSS2 en 1998. Desde entonces, el hover se ha convertido en una parte integral de la experiencia de usuario en ordenadores de sobremesa.

Según CSS Usage Statistics (2025), el 94% de los sitios en el top 1000 utilizan la pseudoclase :hover para al menos un elemento. El hover se aplica con mayor frecuencia a botones (89%), enlaces (85%) y tarjetas (62%).

Diferencia entre hover y otros estados

Hover ≠ active. :hover se activa al pasar el ratón, :active se activa en el momento del clic. :focus se activa al recibir el foco mediante el teclado. Cada estado cumple su función. Hover es una vista previa, active es una confirmación de la acción.

La pseudoclase :hover en CSS

La pseudoclase :hover en CSS aplica estilos a un elemento cuando el usuario pasa el cursor del ratón sobre él. Funciona con cualquier elemento HTML, pero se usa más comúnmente con elementos interactivos.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

La especificidad del selector :hover es la misma que la de una clase (0,1,0). Si necesitas sobrescribir el hover para un elemento específico, usa un selector con mayor especificidad. El orden de declaración es importante: si :hover se declara después de :focus, es posible que hover no funcione al recibir el foco.

Pseudoclases combinadas

:hover se puede combinar con otras pseudoclases para crear lógica compleja. Por ejemplo, .card:hover .card__title cambia el estilo del título dentro de la tarjeta al pasar el ratón sobre toda la tarjeta. Esto permite crear efectos con animación anidada.

Tipos de efectos hover

Los efectos hover se clasifican según el tipo de propiedad que se modifica. Cada tipo es adecuado para diferentes escenarios y crea una sensación específica en el usuario.

El tipo más efectivo es una combinación de efectos de color y sombra. Material Design recomienda usar el cambio de elevación (cambio de altura de sombra) como el tipo principal de retroalimentación hover.

Según Google Material Design (2024), un efecto hover debe ser notable pero no distractivo. La duración de animación recomendada es de 200 a 300 milisegundos. Los efectos demasiado rápidos (menos de 100 ms) pueden pasar desapercibidos, mientras que los demasiado lentos (más de 500 ms) molestan al usuario.

Transiciones CSS para efectos suaves

La propiedad CSS transition hace que los efectos hover sean suaves al animar los cambios de propiedades a lo largo del tiempo. Sin transition, el hover se activa instantáneamente, lo que parece brusco y desagradable a la vista.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

La duración de transition depende del contexto. Para elementos pequeños (iconos, enlaces) — 150–200 ms. Para elementos grandes (tarjetas, modales) — 250–350 ms. La función de easing ease-out ralentiza suavemente la animación al final, creando una sensación natural.

Práctica recomendada — especificar transition para cada propiedad animada individualmente. La propiedad all es conveniente durante el desarrollo, pero en producción es mejor definir propiedades específicas para la animación y evitar efectos inesperados.

Hover en dispositivos táctiles

En dispositivos táctiles, el concepto de hover no existe: no hay cursor que pueda pasar sobre un elemento. Tocar un elemento activa inmediatamente un clic, omitiendo el estado hover. Esto crea problemas si la interfaz depende exclusivamente del hover.

Según StatCounter (2026), el 62% del tráfico web mundial proviene de dispositivos móviles. Ignorar la ausencia de hover en pantallas táctiles significa perder el control de la UX para la mayoría de los usuarios.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

La media query hover: none permite detectar que un dispositivo no admite la función de hover. En tales dispositivos, los efectos hover se desactivan y la interacción se basa en los estados :active y :focus. Una solución alternativa es mostrar el contenido hover al tocar (el primer toque muestra el hover, el segundo realiza la acción), pero este patrón degrada la UX.

Accesibilidad de los efectos hover

La accesibilidad del hover es un aspecto crítico que a menudo se pasa por alto. Los usuarios que navegan por la interfaz con el teclado no pueden activar :hover. Las funciones disponibles solo a través del hover se vuelven inaccesibles para ellos.

Regla WCAG 2.2 (Criterio de éxito 1.4.13 — Contenido al pasar el ratón o al recibir el foco): el contenido que aparece al pasar el ratón también debe estar disponible al recibir el foco. Si hover muestra información adicional (tooltip, menú desplegable), la misma información debe estar disponible en :focus.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

La media query prefers-reduced-motion — respeta la configuración del sistema del usuario. Si el usuario ha desactivado la animación en su sistema, los efectos hover deben aplicarse instantáneamente, sin transition. Esto ayuda a las personas con trastornos vestibulares.

Recomendaciones adicionales: no uses hover para funciones críticas, no te bases únicamente en el color para transmitir información al pasar el ratón (añade un icono o texto) y asegura un contraste suficiente para los estados hover.