En el campo de la informática y el diseño web , un efecto de mouseover es un evento que ocurre cuando el usuario mueve el cursor sobre un punto específico en un monitor de computadora usando un mouse de computadora . También llamado efecto de desplazamiento, los efectos de mouseover 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 de 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 mouseover es esencialmente un evento que ocurre cuando un usuario pasa el puntero del mouse sobre un área específica en una interfaz digital. El usuario no necesita hacer clic ni realizar ninguna otra acción. Simplemente colocar el puntero sobre el elemento es suficiente para activar el efecto. En términos técnicos, un mouseover es un evento. Los desarrolladores web pueden usar este evento para crear experiencias web dinámicas y responsivas. Usando HTML , CSS y JavaScript , los diseñadores pueden definir lo que sucede cuando un usuario pasa el mouse sobre un elemento. Esto podría ser un cambio visual, mostrar contenido adicional o incluso activar animaciones complejas. [3]
Los efectos de mouseover son importantes para mejorar el diseño de la interfaz de usuario (UI) y la experiencia de usuario (UX). Proporcionan una 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 cliqueables o interactivos sin tener que hacer clic primero. Desde una perspectiva de UX, los efectos de mouseover contribuyen a una experiencia más intuitiva y atractiva. Hacen que las interfaces se sientan más dinámicas y receptivas, lo que puede generar una mayor satisfacción del usuario y una mejor interacción general con el sitio. Por ejemplo, un botón que cambia de color cuando se pasa el mouse sobre él 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 de mouseover también se pueden utilizar para revelar información adicional sin saturar la interfaz. Por ejemplo, las sugerencias de herramientas (pequeños cuadros de texto que aparecen al pasar el mouse sobre un elemento) pueden proporcionar sugerencias útiles, definiciones o contexto adicional sin ocupar espacio permanente en la pantalla. Esta capacidad de presentar información a pedido es especialmente valiosa en interfaces complejas, donde el espacio de la pantalla es limitado. [4]
Los efectos de mouseover se utilizan a menudo en el diseño web. Se crean mediante 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 mouseover en CSS es la :hoverpseudoclase.
La pseudoclase :hover en CSS permite a los desarrolladores definir los estilos que se deben aplicar a un elemento. Los estilos se aplican cuando el usuario pasa el puntero del ratón sobre el elemento. A diferencia de las propiedades estáticas de CSS, la pseudoclase :hover se aplica a un elemento solo cuando se cumple una condición específica (pasar el ratón por encima). Los estilos no se aplican en todo momento. La pseudoclase :hover se puede aplicar a casi cualquier elemento HTML. Esto incluye texto, imágenes, botones y enlaces. Al utilizar :hover, la apariencia de estos elementos cambia dinámicamente. Esto crea una experiencia de usuario más atractiva e interactiva. Por ejemplo, :hover se puede utilizar para cambiar el color de fondo de un botón cuando un usuario pasa el ratón por encima de él. Otro ejemplo es agregar una sombra a una imagen cuando se pasa el ratón por encima. Las posibilidades con :hover son amplias y la implementación es sencilla. [5]
1. Cambiar el color de fondo al pasar el mouse sobre el objeto:
<!DOCTYPE html> < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Color de fondo al pasar el mouse </ title > < style > . hover-button { background-color : azul ; color : blanco ; padding : 10 px 20 px ; borde : ninguno ; cursor : puntero ; transición : background-color 0.3 s ease ; } .botón flotante : hover { color de fondo : verde ; } </ estilo > </ cabeza > < cuerpo > < clase de botón = "botón flotante" > Pase el cursor sobre mí </ botón > </ cuerpo > </ html > 2. Cambiar el color del texto al pasar el mouse sobre él:
<!DOCTYPE html> < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Color del texto flotante </ title > < style > . hover-text { color : negro ; tamaño de fuente : 18 px ; decoración de texto : ninguna ; transición : color 0.3 s facilidad ; } . hover-text : hover { color : rojo ; } </ style > </ head > < body > < a href = "#" class = "hover-text" > Pase el cursor sobre este texto </ a > </ body > </ html > 3. Agregar sombra al pasar el mouse
<!DOCTYPE html> < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Sombra al pasar el mouse </ title > < style > . hover-box { ancho : 200 px ; alto : 200 px ; color de fondo : azul claro ; margen : 50 px ; transición : sombra de cuadro 0,3 s facilidad ; } . cuadro flotante : hover { sombra del cuadro : 0 0 15 px rgba ( 0 , 0 , 0 , 0.5 ); } </ estilo > </ cabeza > < cuerpo > < div clase = "cuadro flotante" > </ div > </ cuerpo > </ html > 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 se produce un evento de desplazamiento del mouse. Esto incluye mostrar información sobre herramientas, cambiar contenido o activar animaciones y transiciones que están más allá de lo que CSS puede hacer. Esto se hace mediante detectores de eventos, en particular onmouseovery onmouseout.
Oyentes de eventos: onmouseoveryonmouseout
Los detectores de eventos de JavaScript ayudan a los desarrolladores a ejecutar código cuando suceden eventos específicos. El detector de eventos onmouseover ejecuta código cuando el puntero del mouse de un usuario ingresa a un elemento. El detector de eventos onmouseout ejecuta código cuando el puntero del mouse abandona ese elemento. Estos eventos se pueden agregar a elementos HTML para crear páginas web muy interactivas.
onmouseover:Activa una función cuando el puntero del mouse ingresa a un elemento.onmouseout:Activa una función cuando el puntero del mouse abandona un elemento. [6]1. Cómo mostrar una información sobre herramientas al pasar el mouse sobre ella
<!DOCTYPE html> < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Información sobre herramientas al pasar el mouse </ 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> < div id="tooltip" class="tooltip " > < script > const hoverElement = document . getElementById ( 'elemento-hover' ); const tooltip = document . getElementById ( 'tooltip' ); hoverElement . addEventListener ( 'mouseover' , function ( evento ) { tooltip . style . display = 'block' ; tooltip . style . left = evento . pageX + 10 + 'px' ; tooltip . style . top = evento . pageY + 10 + 'px' ; }); elemento flotante . addEventListener ( 'mouseout' , función () { información sobre herramientas . estilo . pantalla = 'ninguno' ; }); hoverElement . addEventListener ( 'mousemove' , function ( evento ) { tooltip . style . left = evento . pageX + 10 + 'px' ; tooltip . style . top = evento . pageY + 10 + 'px' ; }); </ script > </ body > </ html > 2. Cambiar el contenido dinámicamente al pasar el mouse 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 { ancho : 300 px ; alto : 200 px ; color de fondo : lightcoral ; alineación del texto : centro ; alto de línea : 200 px ; tamaño de fuente : 20 px ; color : blanco ; cursor : puntero ; transición : color de fondo 0.3 s ease ; } </ style > </ head > < body > < div id = "hover-box" > Pase el cursor sobre mí </ div > < script > const hoverBox = document . getElementById ( 'hover-box' ); hoverBox . addEventListener ( 'mouseover' , function () { hoverBox . style . backgroundColor = 'darkslateblue' ; hoverBox . textContent = '¡Estás pasando el mouse!' ; }); hoverBox . addEventListener ( 'mouseout' , function () { hoverBox . style . backgroundColor = 'lightcoral' ; hoverBox . textContent = 'Pasa el cursor sobre mí' ; }); </ script > </ body > </ html > Los efectos de pasar el ratón por encima son importantes para el diseño web moderno. Mejoran la interactividad y la participación del usuario de diferentes 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, examinaré algunos de los usos más comunes de los efectos de pasar el ratón por encima en el diseño web.
Las descripciones emergentes son pequeñas ventanas emergentes informativas que aparecen cuando el usuario pasa el cursor sobre un elemento. Los elementos pueden ser iconos, botones o texto. El objetivo principal de las descripciones emergentes es proporcionar información o contexto adicional. Esto ayuda a evitar saturar la interfaz. Las descripciones emergentes son una excelente solución. Pueden ofrecer sugerencias, explicaciones o detalles útiles. Estos detalles pueden ser demasiado engorrosos para mostrarlos directamente en la página. Por ejemplo, en una aplicación web compleja que tiene numerosos iconos o botones. Las descripciones emergentes pueden explicar la función de cada elemento. Esto reduce la curva de aprendizaje para los nuevos usuarios. Las descripciones emergentes solo aparecen cuando son necesarias. Esto mantiene la interfaz limpia y enfocada. Los usuarios pueden acceder a información adicional a pedido. Las descripciones emergentes se encuentran comúnmente en los formularios. Pueden ofrecer orientación sobre cómo completar campos específicos. Por ejemplo, al pasar el cursor sobre un icono de signo de interrogación junto a un campo de formulario, una descripción emergente puede mostrar una explicación. Puede explicar qué información se requiere o proporcionar un ejemplo de entrada válida.
Ejemplo :
Las descripciones emergentes brindan información adicional cuando los usuarios pasan el cursor sobre los elementos. A continuación, se muestra un ejemplo simple 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 { visibilidad : oculta ; ancho : 120 px ; color de fondo : negro ; color : #fff ; alineación del texto : centro ; radio del borde : 5 px ; relleno : 5 px ; posición : absoluta ; índice z : 1 ; inferior : 125 % ; /* Posiciona la información sobre herramientas sobre el texto */ izquierda : 50 % ; margen izquierdo : -60 px ; opacidad : 0 ; transición : opacidad 0.3 s ; } . tooltip : hover . tooltip-text { visibilidad : visible ; opacidad : 1 ; } </ style > </ head > < body > < div class = "tooltip" > Pase el cursor sobre mí < div class = "tooltip-text" > Texto de información sobre herramientas </ div > </ div ></ cuerpo > </ html >Los menús de navegación son una parte fundamental de cualquier sitio web. Guían a los usuarios a diferentes secciones o páginas. Los efectos de mouseover desempeñan un papel importante en la mejora de la usabilidad y la funcionalidad de los menús de navegación. Esto es particularmente 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 cursor sobre 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 de mouseover en los menús desplegables mejoran la experiencia general del usuario. Proporcionan información visual instantánea. Por ejemplo, cuando un usuario pasa el cursor sobre un elemento del menú, el color de fondo puede cambiar. O puede aparecer una flecha, indicando que hay más opciones disponibles. Esto le deja claro al usuario que el elemento es interactivo y mostrará más opciones. Los menús desplegables pueden ser particularmente ú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 de navegación desplegables son un uso común de los efectos de pasar el mouse por encima. A continuación, se muestra 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 { flotador : izquierda ; } li a , . dropdown-btn { display : inline-block ; color : blanco ; alineación del texto : centro ; relleno : 14 px 16 px ; decoración del texto : ninguna ; } li a : hover , . dropdown : hover . dropdown-btn { color de fondo : #111 ; } li . desplegable { display : bloque en línea ; } . contenido-desplegable { pantalla : ninguno ; posición : absoluta ; color-de-fondo : #f9f9f9 ; ancho-mín : 160 px ; sombra-de-caja : 0 px 8 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.2 ); índice-z : 1 ; } . contenido-desplegable a { color : negro ; relleno : 12 px 16 px ; decoración-de-texto : ninguna ; visualización : bloque ; alineación-de-texto : izquierda ; } . contenido desplegable a : hover { color de fondo : #f1f1f1 ; } . desplegable : pasar el mouse . desplegable-contenido { mostrar : bloque ; } </ estilo > </ cabeza > < cuerpo > < 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 ></ cuerpo > </ html >Las galerías de imágenes son una característica popular en muchos sitios web. Suelen utilizarse en portafolios, sitios de comercio electrónico y blogs de fotografía. Los efectos de pasar el ratón pueden mejorar la experiencia del usuario en las galerías de imágenes. Estos efectos añaden elementos interactivos. Atraen a los usuarios y los animan a explorar más contenido. Un uso común del efecto de pasar el ratón en las galerías de imágenes es el efecto de zoom. Cuando un usuario pasa el ratón sobre una miniatura o imagen, la imagen puede acercarse ligeramente. Esto permite al usuario ver más de cerca los detalles. Este efecto puede ser especialmente útil en las galerías de productos. Los usuarios quieren inspeccionar la calidad o las características de un artículo antes de realizar una compra. Otro uso del efecto de pasar el ratón en las galerías de imágenes es mostrar información adicional o vistas previas. Por ejemplo, pasar el ratón sobre una imagen puede revelar el título, la descripción o incluso una breve animación de la imagen. Esto puede hacer que la galería sea más informativa e interactiva. Ofrece a los usuarios una experiencia más rica. Los efectos de pasar el ratón también se pueden utilizar para crear transiciones similares a una presentación de diapositivas. Pasar el ratón sobre una imagen puede cambiarla a otra versión o ángulo. Esto ofrece a los usuarios una vista dinámica del contenido sin necesidad de hacer clic.
Ejemplo :
Los efectos al pasar el mouse pueden mejorar las galerías de imágenes, por ejemplo, al hacer zoom en una imagen cuando se pasa el mouse 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 de galería de imágenes </ title > < style > . gallery { display : flex ; justify-content : space-around ; flex-wrap : wrap ; } . galería img { ancho : 300 px ; alto : 200 px ; transición : transformar 0.3 s facilidad ; } . galería img : hover { transformar : escala ( 1.1 ); } </ estilo > </ cabeza > < cuerpo > < 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 ></ cuerpo > </ html >Los botones son esenciales en el diseño web. Permiten a los usuarios realizar acciones como enviar formularios, realizar compras o navegar a diferentes páginas. El uso de efectos de mouseover en los botones puede hacerlos más interactivos y responsivos. Esto mejora la experiencia general del usuario. Cuando un usuario pasa el mouse sobre un botón, la apariencia del botón cambia. Por ejemplo, el color puede cambiar, se puede agregar una sombra o el botón puede volverse un poco más grande. Esta respuesta visual le dice al usuario que el botón está activo y listo para hacer clic. Esta respuesta es crucial para la usabilidad. Muestra a los usuarios qué elementos son interactivos y los alienta a interactuar con los botones. Los botones con efectos de mouseover también agregan sofisticación al diseño. Por ejemplo, una animación sutil que hace que el botón se "levante" o "brille" cuando se pasa el mouse sobre él puede hacer que el sitio web se vea más dinámico y pulido. Más allá de los efectos visuales, los botones pueden activar otras acciones al pasar el mouse sobre ellos. Estas acciones pueden incluir mostrar una información sobre herramientas con información adicional, revelar contenido oculto o reproducir una animación breve o un efecto de sonido. Estas mejoras pueden hacer que las interacciones sean más agradables e intuitivas.
Ejemplo : los efectos de pasar el mouse pueden hacer que los botones sean más interactivos al cambiar su apariencia dinámicamente.
<!DOCTYPE html> < html lang = "es" > < 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 : blanco ; 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 ; } . botón interactivo : hover { color de fondo : #005f73 ; transformar : translateY ( -3 px ); } </ style > </ head > < body > < botón clase = "interactive-button" > Pase el cursor sobre mí </ botón ></ cuerpo > </ html >[7]
Medios relacionados con Ratón flotando en Wikimedia Commons