Definición
El mouse over, también llamado hover o paso del cursor, es una interacción que se produce cuando un puntero se sitúa sobre un elemento de una interfaz sin activarlo mediante un clic. El sistema puede responder cambiando su aspecto, mostrando información o preparando una acción mientras el puntero permanece en esa zona.
El término puede referirse tanto al estado visual percibido por la persona como a eventos que una aplicación detecta mediante código. No todos los dispositivos disponen de cursor ni todas las respuestas al pasar el puntero son accesibles, por lo que esta interacción no debería ser el único medio para descubrir contenido o ejecutar una función esencial.
Qué sucede al pasar el cursor
Una interfaz define una región interactiva y una respuesta asociada. Cuando el puntero entra en esa región, puede modificarse un color, aparecer una ayuda contextual o mostrarse una vista previa. Al salir, la respuesta suele desaparecer o volver a su estado inicial.
El mouse over no implica necesariamente una activación. Un enlace puede cambiar de color al pasar el cursor, pero la navegación ocurre al hacer clic o utilizar el teclado. Esta diferencia entre indicación y acción ayuda a evitar respuestas inesperadas.
La reacción tampoco depende por sí sola del sistema operativo. En una web puede estar definida mediante CSS, JavaScript o comportamientos nativos del navegador. En una aplicación de escritorio puede formar parte de los controles proporcionados por el entorno. Su velocidad y resultado dependen de la implementación, del dispositivo y del contenido que deba cargarse.
Mouse over, hover y eventos relacionados
En lenguaje de diseño, mouse over y hover suelen describir el mismo estado de puntero. En desarrollo web conviene distinguir el estado visual de los mecanismos utilizados para detectarlo:
- :hover: Pseudoclase de CSS que aplica estilos cuando el dispositivo permite señalar un elemento.
- mouseover: Evento del DOM que se dispara cuando el puntero entra en un elemento o en uno de sus descendientes y puede propagarse por la jerarquía.
- mouseenter: Evento que detecta la entrada en el elemento sin reaccionar del mismo modo al atravesar sus descendientes.
- pointer events: Familia de eventos que puede unificar entradas de ratón, lápiz y otros dispositivos señaladores.
Un rollover suele designar el cambio visual de una imagen o control al situar el puntero encima. Un tooltip es el pequeño mensaje contextual que puede aparecer como respuesta. Son resultados posibles del mouse over, pero no sinónimos exactos del evento técnico.
La elección depende del objetivo. Un cambio visual puede resolverse con CSS; una respuesta que actualiza datos o coordina varios componentes puede necesitar programación. Añadir código sin necesidad aumenta la complejidad y puede producir diferencias entre dispositivos.
Aplicaciones en interfaces
El mouse over aporta una capa secundaria de información o feedback a una interfaz gráfica. Entre sus usos habituales se encuentran:
- Estados de control: Resaltar enlaces, botones, filas o zonas seleccionables antes de la activación.
- Ayuda contextual: Explicar un icono, una abreviatura o un dato mediante un tooltip breve.
- Vistas previas: Mostrar una miniatura, un detalle ampliado o información resumida sin abandonar la pantalla.
- Visualización de datos: Identificar valores de un punto, una barra o una región de un gráfico.
- Herramientas creativas: Previsualizar ajustes o descubrir controles en editores de imagen, vídeo o mapas.
Estos usos pueden reducir el ruido visual, pero también ocultar información. Si la persona no reconoce que un elemento admite hover, la ayuda puede pasar inadvertida. Los menús que aparecen al pasar el cursor requieren además tolerancia suficiente para que pequeños movimientos no los cierren accidentalmente.
Accesibilidad y dispositivos táctiles
Una pantalla táctil no dispone de un estado de hover estable equivalente al de un ratón. Algunos navegadores simulan una primera pulsación para mostrarlo y una segunda para activar el elemento, pero ese comportamiento no es uniforme. Un diseño responsive debe considerar capacidades de entrada, no solo el ancho de la pantalla.
La información esencial debería estar disponible mediante métodos alternativos. Una interacción robusta permite acceder al mismo contenido con teclado, foco, toque o activación explícita. También mantiene visible el contenido el tiempo suficiente para leerlo y cerrarlo sin perder el contexto.
En términos de accesibilidad web, el color no debe ser la única señal de cambio y los controles necesitan nombres comprensibles. Un tooltip no corrige por sí mismo un icono ambiguo ni sustituye una etiqueta. Si el contenido aparece al hover o al foco, debe evitar interferir con la lectura, el zoom o el desplazamiento.
Buenas prácticas y medición
Antes de añadir un mouse over conviene definir qué duda resuelve y qué ocurrirá sin puntero. La respuesta debe ser predecible, coherente con controles similares y proporcional a la importancia del contenido.
Un proceso de revisión puede incluir estos pasos:
- Definir el propósito: Separar feedback, ayuda, vista previa y activación.
- Diseñar alternativas: Comprobar teclado, foco, toque y contenido persistente.
- Probar tolerancia: Revisar retardos, áreas de activación, cierre y movimientos involuntarios.
- Verificar comprensión: Observar si las personas descubren la interacción y entienden su respuesta.
- Medir el resultado: Relacionar el uso con la tarea completada, los errores o el abandono, no solo con el número de eventos.
Registrar un evento de mouseover puede generar muchas señales mientras el puntero atraviesa elementos anidados. Para analítica, suele ser necesario filtrar repeticiones y diferenciar una exposición accidental de una interacción útil. Una frecuencia elevada no demuestra por sí sola que el diseño funcione.
El mouse over es adecuado como apoyo de interfaz, especialmente en entornos con puntero. Pierde utilidad cuando oculta funciones críticas, exige precisión excesiva o carece de alternativa. Su calidad depende de la implementación, la accesibilidad y la comprobación con los dispositivos y tareas reales.