Siete usos de los eventos de desplazamiento del mouse
En el proceso de escribir el front-end web recientemente, descubrí que a menudo se utilizan pseudoclases, como :link, :visited, :hover, :active, :disabled, etc. Entre ellos: enlace generalmente indica el estado del enlace en el que no se ha hecho clic, :visited indica el estado en el que se hizo clic, :hover indica el mouse sobre el cursor, :active indica el estado del enlace o botón cuando se presiona y suelta el mouse, y :disabled se usa a menudo para indicar que el elemento está deshabilitado. Entre ellos, la interacción de desplazamiento del mouse (hover / onmouseover) tiene las aplicaciones más diversas. Cuando css no puede satisfacer el evento de desplazamiento, a menudo se usa js para implementarlo. Los eventos al pasar el mouse pueden adoptar muchas formas en la mente de los desarrolladores y diseñadores. Desde la perspectiva de la interacción, existen aproximadamente las siguientes categorías:
1. Las más comunes se utilizan en elementos en los que se puede hacer clic o en enlaces web que se muestran subrayados cuando se pasa el mouse y en botones/iconos. El color y otros estados cambian al pasar el mouse. Si se trata de un estilo de diseño de materiales, la tarjeta seleccionada con el mouse a menudo estará sombreada para que parezca que está flotando.
Aparecerán sugerencias al pasar el ratón sobre algunos iconos para indicar el significado o función del botón. Proporcione comentarios instantáneos sobre el comportamiento de movimiento del mouse del usuario para recordarles que se ha seleccionado un elemento o hipervínculo en el que se puede hacer clic y que se puede hacer clic en él.
2. Se utiliza para mostrar los detalles del menú/categoría de segundo nivel en la navegación. Se puede hacer clic directamente en el enlace del menú de primer nivel seleccionado para mostrarlo, o se puede seleccionar el menú de segundo nivel para ingresar un menú más detallado. página de clasificación.
Cabe señalar que cuando cada opción de la navegación tiene un menú secundario y se muestra cuando se pasa el mouse, será mejor tener un cierto retraso antes de que aparezca el menú secundario. es que si se muestra inmediatamente cuando el mouse está sobre el cursor, la visualización del menú secundario deslumbrará a las personas cuando el mouse se mueva a lo largo de la barra de navegación, lo que aumentará la irritabilidad del usuario y si el menú secundario se retrasa, se puede mostrar después; el usuario permanece en una determinada opción durante un breve período de tiempo (el usuario puede estar interesado en esta opción y desea hacer clic) y luego aparece y puede centrar su atención en la opción relevante.
3.Mostrar botones/iconos ocultos.
Cuando algunos botones: (1) no son tan importantes, (2) no quieres que los botones atraigan demasiado la atención del usuario, (3) cada imagen o módulo similar tiene botones con el mismo operación, puede Este botón se muestra cuando el usuario está interesado en una sección y mueve el mouse hacia ella. Por ejemplo, en los anuncios de Facebook, el botón de cerrar solo aparece cuando el mouse se coloca sobre el contenido del anuncio. En comparación con los anuncios pre-roll sin botón de cierre, aumenta la sensación de control del usuario en comparación con los anuncios pre-roll. donde el botón de cerrar siempre se muestra de forma predeterminada. En términos de publicidad, puede aumentar la atención del usuario al anuncio antes de cerrarlo, lo que es beneficioso para la tasa de conversión del anuncio (si el botón de cerrar siempre se muestra, la mayor parte del tiempo). La atención del usuario estará en el botón de cerrar y estará ansioso por cerrarlo e ignorar fácilmente el contenido.
4. Centrar la atención del usuario ocultando o debilitando otros elementos o resaltando elementos seleccionados. Los productos se pueden mostrar mejor dentro de la página actual.
5. Muestre información adicional/más detallada sobre elementos relacionados mediante el enmascaramiento de imágenes o mostrando una nueva capa flotante alrededor del elemento seleccionado. Esto permite a los usuarios obtener información más relevante sin tener que saltar a la página.
6. El gif se reproduce automáticamente cuando el mouse está sobre la imagen. Cuando el mouse está sobre la imagen gif, la imagen se convierte en una imagen en movimiento, en lugar de reproducirse. continuamente desde el principio, deslumbrante (esta es la misma razón por la que los videos rara vez están configurados para reproducción automática).
7. Muestra opciones intercambiables, como el cambio instantáneo del estado del sonido o el estado de la calidad de la imagen en el vídeo.
Lo anterior es solo un resumen de varios usos de los eventos del mouseover. Estos usos tienen ventajas y desventajas. Los elementos de la página web deben elegir si usar el mouseover para activar eventos de acuerdo con sus propias características. Se aceptan críticas y correcciones. (Emoticón manual)