Utiliser le survol dans jQuery

Dans l’article d’aujourd’hui, nous allons découvrir l’événement .hover() dans jQuery.

Utiliser .hover() dans jQuery

L’approche .hover() de JQuery lie un ou les deux gestionnaires aux facteurs de correspondance pour qu’ils se terminent simultanément lorsque le curseur de la souris entre et sort des éléments. Selon les gestionnaires de classeur, il existe trois variétés de paramètres que l’approche .hover() peut prendre.

Syntaxe:

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

Paramètres:

1. handlerInFn : lorsque le pointeur de la souris entre dans l’élément, cette fonction doit être appelée/exécutée.
2. handlerOutFn : lorsque le pointeur de la souris quitte l’élément, cette fonction doit être appelée/exécutée.
3. handlerInOutFn : lorsque le pointeur de la souris entre ou quitte l’élément, cette fonction doit être appelée/exécutée.

L’approche .hover() lie les contrôleurs pour qu’une souris entre et sorte des activités. Vous pouvez l’utiliser pour observer le comportement de l’élément à un moment donné lorsque la souris est à l’intérieur du détail.

La technique .hover(), même si vous passez une seule fonction, exécute ce gestionnaire à la fois sur l’entrée et la sortie de la souris. Cela permettra à la personne d’utiliser les différentes techniques de basculement de jQuery dans le gestionnaire ou de répondre de manière extraordinaire dans le gestionnaire en fonction de event.type.

Vous pouvez trouver plus d’informations dans la documentation sur l’approche .hover() ici.

Comprenons .hover() avec l’exemple suivant :

Code HTML:

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

Code Javascript :

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

En utilisant l’élément ul, nous avons décrit une liste de systèmes d’exploitation dans l’exemple ci-dessus. Lorsque vous commencez à survoler la liste, elle suivra l’impact du survol sur l’élément, et la fonction appropriée est alors exécutée.

Dans l’exemple ci-dessus, lorsque vous commencez à survoler Linux, il imprimera la valeur textuelle de l’élément.

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge jQuery. Il affichera le résultat ci-dessous:

Production:

"Linux"

Voir le fonctionnement démo du code ici.