Hispanopedia Wiki
Articulo de referencia

Pasa el ratón por encima

Los eventos de pasar el ratón por encima del ratón suelen activarse mediante el movimiento del ratón del ordenador . En el campo de la informática y el diseño web , un mouseover...

Hispanopedia WikiContenido en espanolLectura gratuita
Un ratón de ordenador
Los eventos de pasar el ratón por encima del ratón suelen activarse mediante el movimiento del ratón del ordenador .

En el campo de la informática y el diseño web , un mouseover (también conocido como Tooltip ) es un evento que ocurre cuando el usuario mueve el cursor sobre un punto específico en el monitor de la computadora usando un mouse . También llamado efecto hover, los mouseovers son controles gráficos que responden cuando un usuario mueve el puntero del mouse sobre un área designada. Esta área puede ser un botón, una imagen o un hipervínculo . Esta simple acción puede desencadenar diferentes respuestas. El color o la apariencia del elemento pueden cambiar. Se puede mostrar información adicional o contenido interactivo. El efecto mouseover es una parte esencial de la interacción del usuario. Agrega capas de interactividad y capacidad de respuesta a sitios web y aplicaciones. [ 1 ] [ 2 ]

Un evento mouseover ocurre cuando un usuario coloca el puntero del ratón sobre un área específica de una interfaz digital. El usuario no necesita hacer clic ni realizar ninguna otra acción. Basta con colocar el puntero sobre el elemento para activar el efecto. En términos técnicos, mouseover es un evento. Los desarrolladores web pueden usar este evento para crear experiencias web dinámicas y responsivas. Mediante HTML , CSS y JavaScript , los diseñadores pueden definir qué sucede cuando un usuario coloca el puntero sobre un elemento. Esto podría ser un cambio visual, mostrar contenido adicional o incluso activar animaciones complejas. [ 3 ]

Importancia en el diseño de UI/UX

Los efectos al pasar el ratón por encima son importantes para mejorar el diseño de la interfaz de usuario (UI) y la experiencia de usuario (UX). Proporcionan retroalimentación visual inmediata a los usuarios, indicando que un elemento es interactivo y se puede interactuar con él. Esta retroalimentación ayuda a guiar a los usuarios a través de un sitio web o aplicación, permitiéndoles saber qué elementos son clicables o interactivos sin necesidad de hacer clic primero. Desde la perspectiva de la UX, los efectos al pasar el ratón por encima contribuyen a una experiencia más intuitiva y atractiva. Hacen que las interfaces se sientan más dinámicas y receptivas, lo que puede conducir a una mayor satisfacción del usuario y una mejor interacción general con el sitio. Por ejemplo, un botón que cambia de color al pasar el ratón por encima se siente más vivo e interactivo que uno estático, lo que anima a los usuarios a hacer clic y explorar más. Los efectos al pasar el ratón por encima también se pueden usar para revelar información adicional sin saturar la interfaz. Por ejemplo, las sugerencias sobre herramientas (pequeños cuadros de texto que aparecen al pasar el ratón por encima de un elemento) pueden proporcionar consejos útiles, definiciones o contexto adicional sin ocupar espacio permanente en la pantalla. Esta capacidad de presentar información bajo demanda es especialmente valiosa en interfaces complejas, donde el espacio en pantalla es limitado. [ 4 ]

Implementación técnica

HTML/CSS mouseover

Los efectos de pasar el ratón por encima se utilizan con frecuencia en el diseño web. Se crean utilizando HTML y CSS. Estas tecnologías hacen que sea fácil y eficiente hacer que los elementos web sean más interactivos y responsivos. Una de las herramientas clave para crear efectos de pasar el ratón por encima en CSS es la :hoverpseudoclase.

pseudoclases CSS

La pseudoclase `:hover` en CSS permite a los desarrolladores definir los estilos que se aplicarán a un elemento. Estos estilos se aplican cuando el usuario coloca el puntero del ratón sobre el elemento. A diferencia de las propiedades estáticas de CSS, la pseudoclase `:hover` solo afecta a un elemento cuando se cumple una condición específica (al pasar el ratón por encima). Los estilos no se aplican siempre. La pseudoclase `:hover` se puede aplicar a casi cualquier elemento HTML, incluyendo texto, imágenes, botones y enlaces. Al usar `:hover`, la apariencia de estos elementos cambia dinámicamente, creando una experiencia de usuario más atractiva e interactiva. Por ejemplo, `:hover` se puede usar para cambiar el color de fondo de un botón cuando el usuario pasa el ratón por encima. Otro ejemplo es añadir una sombra a una imagen al pasar el ratón por encima. Las posibilidades con `:hover` son enormes y su implementación es sencilla. [ 5 ]

Código de ejemplo

1. Cambiar el color de fondo al pasar el cursor por encima:

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = "width = device-width, initial-scale=1.0" > <title> Color de fondo al pasar el ratón </title> <style> .hover - button { background - color : blue ; color : white ; padding : 10px 20px ; border : none ; cursor : pointer ; transition : background - color 0.3s ease ; }. hover-button : hover { background-color : green ; } </ style > </ head > < body > < button class = "hover-button" > Pasa el ratón por encima </ button > </ body > </ html >

2. Cambiar el color del texto al pasar el cursor por encima:

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Color del texto al pasar el ratón </ title > < style > . hover-text { color : black ; font-size : 18 px ; text-decoration : none ; transition : color 0.3 s ease ; }. hover-text : hover { color : red ; } </ style > </ head > < body > < a href = "#" class = "hover-text" > Pasa el ratón por encima de este texto </ a > </ body > </ html >

3. Agregar sombra al pasar el cursor

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Sombra al pasar el ratón </ title > < style > . hover-box { width : 200 px ; height : 200 px ; background-color : lightblue ; margin : 50 px ; transition : box-shadow 0.3 s ease ; }. hover-box : hover { box-shadow : 0 0 15 px rgba ( 0 , 0 , 0 , 0.5 ); } </ style > </ head > < body > < div class = "hover-box" ></ div > </ body > </ html >

JavaScript mouseover

CSS es bueno para crear efectos de desplazamiento simples y efectivos. JavaScript permite comportamientos más complejos y dinámicos cuando un usuario pasa el cursor sobre un elemento. JavaScript puede controlar exactamente lo que sucede cuando ocurre un evento mouseover. Esto incluye mostrar información sobre herramientas, cambiar el contenido o activar animaciones y transiciones que van más allá de lo que CSS puede hacer. Esto se hace usando detectores de eventos, en particular onmouseovery onmouseout.

Oyentes del evento: onmouseoveryonmouseout

Los detectores de eventos de JavaScript ayudan a los desarrolladores a ejecutar código cuando ocurren eventos específicos. El detector de eventos `onmouseover` ejecuta código cuando el puntero del ratón entra en un elemento. El detector de eventos `onmouseout` ejecuta código cuando el puntero del ratón sale de ese elemento. Estos eventos se pueden añadir a elementos HTML para crear páginas web muy interactivas.

  • onmouseover: Activa una función cuando el puntero del ratón entra en un elemento.
  • onmouseout: Activa una función cuando el puntero del ratón abandona un elemento. [ 6 ]

Código de ejemplo

1. Mostrar una información emergente al pasar el cursor sobre un elemento.

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Información sobre herramientas al pasar el ratón por encima </ title > < style > . tooltip { display : none ; position : absolute ; background-color : black ; color : white ; padding : 5 px ; border-radius : 3 px ; font-size : 12 px ; } </ style > </ head > < body > < div id = "hover-element" style = "display:inline-block; padding:10px; background-color:lightblue; cursor:pointer;" > Pasa el cursor sobre mí </div> < div id = "tooltip" class = "tooltip" > ¡ Esto es una información sobre herramientas! </div><script> const hoverElement = document.getElementById ( ' hover-element ' ) ; const tooltip = document.getElementById ( ' tooltip ' ) ;hoverElement . addEventListener ( 'mouseover' , function ( event ) { tooltip . style . display = 'block' ; tooltip . style . left = event . pageX + 10 + 'px' ; tooltip . style . top = event . pageY + 10 + 'px' ; });elemento flotante . addEventListener ( 'mouseout' , function () { información sobre herramientas . estilo . display = 'none' ; });hoverElement.addEventListener ( ' mousemove ' , function ( event ) { tooltip.style.left = event.pageX + 10 + ' px ' ; tooltip.style.top = event.pageY + 10 + ' px ' ; } ) ; </script> </body> </html>​​​​​​​​​​​​

2. Cambiar el contenido dinámicamente al pasar el cursor sobre él.

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Cambio de contenido dinámico </ title > < style > # hover-box { width : 300 px ; height : 200 px ; background-color : lightcoral ; text-align : center ; line-height : 200 px ; font-size : 20 px ; color : white ; cursor : pointer ; transition : background-color 0.3 s ease ; } </ style > </ head > < body > < div id = "hover-box" > Pasa el ratón por encima de mí </ div ><script> const hoverBox = document.getElementById ( 'hover - box ' ) ;hoverBox.addEventListener ( 'mouseover' , function () { hoverBox.style.backgroundColor = ' darkslateblue ' ; hoverBox.textContent = ' ¡ Estás pasando el ratón por encima ! ' ; } ) ;hoverBox.addEventListener ( ' mouseout ' , function ( ) { hoverBox.style.backgroundColor = ' lightcoral ' ; hoverBox.textContent = ' Pasa el ratón por encima ' ; } ) ; </script> </body> </html>​

Aplicaciones en el diseño web moderno

Los efectos de desplazamiento del ratón son importantes en el diseño web moderno. Mejoran la interactividad y la participación del usuario de diversas maneras. Estos efectos permiten a los diseñadores proporcionar más información, mejorar la navegación y crear experiencias visualmente atractivas sin abrumar a los usuarios. A continuación, analizaré algunos de los usos más comunes de los efectos de desplazamiento del ratón en el diseño web.

Información sobre herramientas

Las sugerencias emergentes son pequeñas ventanas informativas que aparecen cuando el usuario pasa el cursor sobre un elemento. Estos elementos pueden ser iconos, botones o texto. Su propósito principal es proporcionar información o contexto adicional, lo que ayuda a evitar la saturación de la interfaz. Son una excelente solución, ya que ofrecen sugerencias útiles, explicaciones o detalles que podrían ser demasiado extensos para mostrar directamente en la página. Por ejemplo, en una aplicación web compleja con numerosos iconos o botones, las sugerencias emergentes explican la función de cada elemento, lo que facilita el aprendizaje para los nuevos usuarios. Además, solo aparecen cuando son necesarias, manteniendo la interfaz limpia y enfocada. Los usuarios pueden acceder a información adicional cuando la necesiten. Las sugerencias emergentes se encuentran comúnmente en formularios, donde ofrecen orientación sobre cómo completar campos específicos. Por ejemplo, al pasar el cursor sobre un icono de interrogación junto a un campo del formulario, la sugerencia emergente podría mostrar una explicación, indicar qué información se requiere o proporcionar un ejemplo de entrada válida.

Ejemplo :

Las sugerencias emergentes proporcionan información adicional cuando los usuarios pasan el cursor sobre los elementos. Aquí tienes un ejemplo sencillo con HTML, CSS y JavaScript.

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de información sobre herramientas </ title > < style > . tooltip { position : relative ; display : inline-block ; cursor : pointer ; }.tooltip .tooltip -text { visibility : hidden ; width : 120px ; background-color : black ; color : #fff ; text - align : center ; border -radius : 5px ; padding : 5px ; position : absolute ; z-index : 1 ; bottom : 125 % ; /* Posicionar la información sobre herramientas encima del texto */ left : 50 % ; margin - left : -60px ; opacity : 0 ; transition : opacity 0.3s ; }. tooltip : hover . tooltip-text { visibility : visible ; opacity : 1 ; } </ style > </ head > < body >< div class = "tooltip" > Pasa el ratón por encima de mí </div> < div class = "tooltip-text" > Texto de la información sobre herramientas </div> </div></body> </html>​​​​

Los menús de navegación son una parte crucial de cualquier sitio web. Guían a los usuarios a diferentes secciones o páginas. Los efectos al pasar el ratón por encima desempeñan un papel importante en la mejora de la usabilidad y la funcionalidad de los menús de navegación. Esto es especialmente cierto para los menús desplegables. Un menú desplegable es un tipo de menú de navegación. Revela enlaces u opciones adicionales cuando un usuario pasa el ratón por encima de un elemento del menú principal. Esto permite a los usuarios explorar subcategorías o páginas relacionadas sin necesidad de hacer clic. Esto hace que el proceso de navegación sea más fluido y eficiente. Los efectos al pasar el ratón por encima en los menús desplegables mejoran la experiencia general del usuario. Proporcionan retroalimentación visual instantánea. Por ejemplo, cuando un usuario pasa el ratón por encima de un elemento del menú, el color de fondo puede cambiar. O puede aparecer una flecha, indicando que hay más opciones disponibles. Esto deja claro al usuario que el elemento es interactivo y revelará más opciones. Los menús desplegables pueden ser especialmente útiles en sitios web con una gran cantidad de contenido. Esto incluye sitios de comercio electrónico, donde organizar los productos en categorías y subcategorías es esencial para una navegación sencilla.

Ejemplo :

Los menús desplegables de navegación son un uso común de los efectos de pasar el ratón por encima. Aquí tienes un ejemplo:

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de menú desplegable </ title > < style > ul { list-style-type : none ; margin : 0 ; padding : 0 ; overflow : hidden ; background-color : #333 ; }li { flotar : izquierda ; }li a , . dropdown-btn { display : inline-block ; color : white ; text-align : center ; padding : 14 px 16 px ; text-decoration : none ; }li a : hover , . dropdown : hover . dropdown-btn { background-color : #111 ; }li . dropdown { display : inline-block ; }.dropdown - content { display : none ; position : absolute ; background-color : #f9f9f9 ; min -width : 160px ; box - shadow : 0px 8px 16px 0px rgba ( 0 , 0 , 0 , 0.2 ) ; z-index : 1 ; }.dropdown -content a { color : black ; padding : 12px 16px ; text - decoration : none ; display : block ; text- align : left ; }. dropdown-content a : hover { background-color : #f1f1f1 ; }.dropdown : hover .dropdown - content { display : block ; } </style> </head> <body>​​​​​​< ul > < li >< a href = "#home" > Inicio </ a ></ li > < li class = "dropdown" > < a href = "#" class = "dropdown-btn" > Menú desplegable </ a > < div class = "dropdown-content" > < a href = "#link1" > Enlace 1 </ a > < a href = "#link2" > Enlace 2 </ a > < a href = "#link3" > Enlace 3 </ a > </ div > </ li > </ ul ></body> </html>​​​​

Galerías de imágenes

Las galerías de imágenes son una función popular en muchos sitios web. Se utilizan con frecuencia en portafolios, sitios de comercio electrónico y blogs de fotografía. Los efectos al pasar el ratón por encima mejoran la experiencia del usuario en las galerías de imágenes, ya que añaden elementos interactivos que captan la atención de los usuarios y los animan a explorar más contenido. Un uso común de estos efectos es el zoom. Al pasar el ratón por encima de una miniatura o imagen, esta puede ampliarse ligeramente, lo que permite apreciar mejor los detalles. Este efecto resulta especialmente útil en galerías de productos, donde los usuarios pueden comprobar la calidad o las características de un artículo antes de comprarlo. Otro uso es mostrar información adicional o previsualizaciones. Por ejemplo, al pasar el ratón por encima de una imagen, se puede revelar su título, descripción o incluso una breve animación. Esto hace que la galería sea más informativa e interactiva, ofreciendo una experiencia más completa. Los efectos también se pueden usar para crear transiciones tipo presentación de diapositivas. Al pasar el ratón por encima de una imagen, se puede cambiar a otra versión o ángulo, lo que proporciona una vista dinámica del contenido sin necesidad de hacer clic.

Ejemplo :

Los efectos al pasar el ratón por encima pueden mejorar las galerías de imágenes, por ejemplo, ampliando una imagen al situar el cursor sobre ella.

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de zoom en la galería de imágenes </ title > < style > . gallery { display : flex ; justify-content : space-around ; flex-wrap : wrap ; }.gallery img { width : 300px ; height : 200px ; transition : transform 0.3s ease ; }​​​​.gallery img : hover { transform : scale ( 1.1 ) ; } </style> </head> <body>​​​​​​< div class = "gallery" > < img src = "https://via.placeholder.com/300x200" alt = "Imagen de muestra 1" > < img src = "https://via.placeholder.com/300x200" alt = "Imagen de muestra 2" > < img src = "https://via.placeholder.com/300x200" alt = " Imagen de muestra 3" > </div></body> </html>​​​​

Botones interactivos

Los botones son esenciales en el diseño web. Permiten a los usuarios realizar acciones como enviar formularios, hacer compras o navegar a diferentes páginas. El uso de efectos al pasar el ratón por encima de los botones los hace más interactivos y receptivos, mejorando así la experiencia general del usuario. Cuando un usuario pasa el ratón por encima de un botón, su apariencia cambia. Por ejemplo, puede cambiar el color, añadir una sombra o agrandarse ligeramente. Esta retroalimentación visual indica al usuario que el botón está activo y listo para ser pulsado. Esta retroalimentación es crucial para la usabilidad, ya que muestra a los usuarios qué elementos son interactivos y los anima a interactuar con los botones. Los botones con efectos al pasar el ratón por encima también aportan sofisticación al diseño. Por ejemplo, una animación sutil que hace que el botón se "levante" o "brille" al pasar el ratón por encima puede hacer que el sitio web parezca más dinámico y elegante. Además de los efectos visuales, los botones pueden activar otras acciones al pasar el ratón por encima. Estas acciones pueden incluir mostrar una información emergente con información adicional, revelar contenido oculto o reproducir una breve animación o efecto de sonido. Estas mejoras pueden hacer que las interacciones sean más agradables e intuitivas.

Ejemplo : Los efectos al pasar el ratón por encima pueden hacer que los botones sean más interactivos al cambiar su apariencia dinámicamente.

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de botón interactivo </ title > < style > . interactive-button { background-color : #008CBA ; border : none ; color : white ; padding : 15 px 32 px ; text-align : center ; text-decoration : none ; display : inline-block ; font-size : 16 px ; margin : 4 px 2 px ; transition : background-color 0.3 s ease , transform 0.3 s ease ; cursor : pointer ; }. interactive-button : hover { background-color : #005f73 ; transform : translateY ( -3 px ); } </ style > </ head > < body >< button class = "interactive-button" > Pasa el ratón por encima de mí </button></body> </html>​​​​

[ 7 ]

Referencias

  1. ↑ "Controlador de eventos OnMouseOver: Cambio de imagen" . www.javascripter.net . Consultado el 19 de septiembre de 2024 .
  2. ↑ "Menú CSS avanzado | por Web Designer Wall" . webdesignerwall.com . Consultado el 19 de septiembre de 2024 .
  3. ↑ "¿Cuál es la diferencia entre los eventos mouseover y mouseenter?" . Stack Overflow . Consultado el 19 de septiembre de 2024 .
  4. ↑ "¿Cómo saben los usuarios que deben pasar el cursor sobre los elementos?" . ux.stackexchange.com . Consultado el 19 de septiembre de 2024 .
  5. ↑ "onmouseover (elemento HTML) — SitePoint" . SitePoint . 22 de abril de 2014. Consultado el 19 de septiembre de 2024 .
  6. ↑ "Mover el ratón: mouseover/out, mouseenter/leave" . javascript.info . Consultado el 19 de septiembre de 2024 .
  7. ↑ "onmouseover Event" . www.w3schools.com . Consultado el 19 de septiembre de 2024 .

Logotipo de Wikimedia CommonsContenido multimedia relacionado con el efecto de desplazamiento del ratón en Wikimedia Commons.