Usar Hover en jQuery

En la publicación de hoy, aprenderemos sobre el evento .hover() en jQuery.

Usa .hover() en jQuery

El enfoque .hover() de JQuery vincula uno o ambos controladores a los factores de coincidencia para completarse simultáneamente cuando el cursor del mouse ingresa y sale de los elementos. Dependiendo de los manejadores de carpetas, hay tres variedades de parámetros que puede tomar el enfoque .hover().

Sintaxis:

.hover(handlerInFn, handlerOutFn).hover(handlerInOutFn)

Parámetros:

1. handlerInFn: cuando el puntero del mouse ingresa al elemento, esta función debe llamarse/ejecutarse.
2. handlerOutFn: cuando el puntero del mouse abandona el elemento, esta función debe llamarse/ejecutarse.
3. handlerInOutFn: cuando el puntero del mouse ingresa o sale del elemento, esta función debe llamarse/ejecutarse.

El enfoque .hover() vincula los controladores para que un mouse se mueva dentro y fuera de las actividades. Puede usarlo para observar el comportamiento del elemento en un momento dado cuando el mouse está dentro del detalle.

La técnica .hover(), incluso si pasa una sola función, ejecuta ese controlador tanto en la entrada como en la salida del mouse. En este caso, la persona usará las diversas técnicas de alternancia de jQuery dentro del controlador o responderá extraordinariamente dentro del controlador según el event.type.

Puede encontrar más información en la documentación sobre el enfoque .hover() aquí.

Entendamos .hover() con el siguiente ejemplo:

Código HTML:

<ul>
  <li>Windows</li>
  <li>Mac</li>
  <li>Linux</li>
</ul>

Código JavaScript:

$('li').hover(function() {
  console.log(this.textContent)
});

Utilizando el elemento ul, hemos descrito una lista de sistemas operativos en el ejemplo anterior. Cuando comience a pasar el cursor sobre la lista, seguirá el impacto del desplazamiento sobre el elemento y luego se ejecutará la función adecuada.

Dentro de la instancia anterior, cuando comience a pasar el mouse sobre Linux, imprimirá el valor de texto para el elemento.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Mostrará el resultado que se muestra a continuación:

Producción :

"Linux"

Vea el trabajo demostración del código aquí.