≡En resumen
- El mouse over es el estado de «pasar por encima»: sirve para dar feedback visual, no para esconder contenido importante.
- En CSS se usa :hover; en JavaScript, mouseenter suele ser mejor que mouseover porque no se repite al pasar por los elementos hijos.
- La WCAG 1.4.13 exige que el contenido que aparece con hover se pueda cerrar, se pueda recorrer con el puntero y no desaparezca solo.
- Todo lo que se abre con hover debe abrirse también con foco de teclado y con un toque en móvil.
- La media query (hover: hover) permite aplicar efectos solo en dispositivos que de verdad tienen puntero.
01 ¿Qué es el mouse over?
Hoy el hover forma parte del lenguaje básico de cualquier interfaz de escritorio y es una de las primeras cosas que se definen en un sistema de diseño de interfaces web UI y UX: qué elementos reaccionan, cómo y con qué velocidad.
02 Para qué sirve el efecto hover
Feedback de interacción
Confirma que un elemento es clicable: un botón que se oscurece o un enlace que se subraya al pasar el cursor.
Submenús
Despliega las opciones de un menú de navegación, como los menús desplegables o los menús flyout laterales.
Tooltips
Muestra una etiqueta breve que explica un icono o un término sin ocupar espacio fijo en la pantalla.
Vistas previas
Enseña contenido adicional sin cambiar de página: la segunda foto de un producto o la vista previa de un artículo enlazado.
Zoom de producto
Amplía una zona de la imagen en tiendas online para ver detalles del tejido o del acabado.
Wikipedia es un buen ejemplo: al pasar el cursor sobre un enlace interno muestra una vista previa con el primer párrafo y la imagen del artículo. Los menús flyout de las grandes tiendas online también dependen de este estado.
03 Cómo se programa un mouse over: CSS y JavaScript
Para cambios visuales basta con CSS y la pseudoclase :hover, por ejemplo .boton:hover { background: #0a58ca; }. Cuando necesitas lógica (cargar datos, medir interacciones, abrir un componente) entra JavaScript con los eventos del puntero.
| Técnica | Qué hace | Cuándo usarla |
|---|---|---|
| :hover (CSS) | Aplica estilos mientras el puntero está encima | Cambios de color, sombras, subrayados y transiciones |
| :focus-visible (CSS) | Aplica estilos cuando el elemento recibe foco de teclado | Siempre junto a :hover, para no dejar fuera al teclado |
| mouseover / mouseout | Eventos que burbujean: se disparan también al entrar en cada elemento hijo | Delegación de eventos en listas largas |
| mouseenter / mouseleave | Se disparan una sola vez al entrar y salir del elemento; no burbujean | Abrir y cerrar menús o tooltips |
| pointerover / pointerenter | Equivalentes para cualquier puntero (ratón, lápiz o dedo) | Interfaces que deben funcionar igual en táctil |
04 Mouse over y accesibilidad: la WCAG 1.4.13
El criterio 1.4.13 de las WCAG, «Contenido con hover o foco», se añadió en la versión 2.1 (2018) y es de nivel AA, el que exige la normativa europea. Se aplica a tooltips personalizados, submenús y ventanas no modales que aparecen al pasar el cursor o al recibir el foco. Desde junio de 2025 la ley europea de accesibilidad obliga a muchas tiendas online y servicios a cumplirlo.
Descartable
Debe poder cerrarse sin mover el puntero ni el foco, normalmente con la tecla Esc, salvo que sea un aviso de error o no tape otro contenido.
Recorrible (hoverable)
Si aparece con hover, el usuario tiene que poder mover el puntero encima del nuevo contenido sin que desaparezca, por ejemplo para ampliarlo con una lupa.
Persistente
Se queda visible hasta que se retira el hover o el foco, el usuario lo cierra o la información deja de ser válida. Nada de tooltips que se esfuman en dos segundos.
05 Mouse over en móviles: el hover que no existe
En una pantalla táctil no hay puntero flotando sobre la página: el dedo toca o no toca. Algunos navegadores móviles simulan el hover en el primer toque, lo que provoca el famoso «doble toque» para abrir un enlace o estados que se quedan pegados. Por eso un buen diseño responsive no confía en el hover para nada esencial.
La media query hover, definida en Media Queries Level 4, indica si el mecanismo principal de entrada puede pasar por encima de los elementos:
@media (hover: hover) { .tarjeta:hover { transform: translateY(-4px); } }
En móvil la tarjeta se queda quieta y el contenido extra se muestra directamente o tras un toque. Con any-hover compruebas si cualquier mecanismo de entrada, no solo el principal, admite hover.
06 Ejemplos de mouse over bien resueltos
| Patrón | Con ratón | Con teclado | En móvil |
|---|---|---|---|
| Botón principal | Cambia de tono y muestra el cursor de mano | Contorno de foco visible | Estado activo al tocar |
| Mega menú | Se abre al pasar por la categoría | Se abre con Enter o con la flecha abajo | Se abre con un toque en un botón de despliegue |
| Tarjeta de producto | Muestra la segunda foto | Muestra la segunda foto al recibir foco | Carrusel deslizable con las dos fotos |
| Icono con tooltip | Etiqueta que se puede recorrer con el cursor | Etiqueta asociada con aria-describedby | Texto visible junto al icono |
07 Buenas prácticas y errores habituales con el mouse over
- ✓Usa el hover como refuerzo visual, nunca como única forma de ver información importante como precios o condiciones.
- ✓Añade un pequeño retardo (unos 200-300 ms) antes de cerrar un submenú para que el usuario no lo pierda al mover el cursor en diagonal.
- ✓Mantén transiciones cortas y suaves; las animaciones largas hacen que la web parezca lenta.
- ✓Da el mismo estilo a :hover y a :focus-visible para que teclado y ratón vean lo mismo.
- ✓Comprueba el contraste de los estados hover: el texto sigue necesitando la relación mínima de 4,5:1.
- ✓Prueba cada componente con ratón, teclado y móvil antes de publicarlo.
Si estás rediseñando tu web y quieres que estas microinteracciones estén bien resueltas desde el principio, trabajar con un diseño web a medida te permite definirlas en el sistema de componentes en lugar de parchearlas página a página.
Preguntas frecuentes sobre Mouse over (hover)
Significa «ratón por encima»: es el estado que se produce cuando pasas el cursor sobre un elemento sin hacer clic, y el efecto que la web muestra en ese momento. En diseño también se llama hover.
En la práctica son lo mismo. Hover es el nombre del estado en CSS (:hover) y en diseño de interfaces, y mouseover es el nombre del evento de JavaScript que se dispara al entrar el puntero en un elemento.
Con la pseudoclase :hover, por ejemplo .boton:hover { background: #0a58ca; }. Añade la misma regla a :focus-visible para que también se vea al navegar con teclado.
No de forma real, porque en pantalla táctil no hay puntero sobre la página. Algunos navegadores lo simulan en el primer toque, así que el contenido importante debe ser accesible con un toque o estar visible directamente.
El criterio 1.4.13 (nivel AA) exige que ese contenido se pueda cerrar sin mover el puntero, que se pueda recorrer con el cursor sin que desaparezca y que permanezca visible hasta que el usuario lo retire o lo cierre.
Para abrir menús o tooltips suele ser mejor mouseenter, que se dispara una vez al entrar en el elemento. Mouseover burbujea y se repite al pasar por cada elemento hijo.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗