Quand choisir la fonction mouseover () et hover ()?

112

Quelles sont les différences entre jQuery .mouseover()et les .hover()fonctions? S'ils sont totalement identiques, pourquoi jQuery utilise les deux?

jquery mouseevent Bhojendra Rauniyar
la source
4
Ce n'est pas une question en double. votre lien fourni contient des événements mouseover et mouseenter, mais le mien est des événements mouseover et hover.
Bhojendra Rauniyar
1
ils sont différents de la même manière que mouseover nad mouseleave et la réponse acceptée ci-dessous n'est pas précise ... la fonction de survol ajoute un événement mouseenter et mouseleve pas des événements mouseover et mouseout
Arun P Johny
1
voir jsfiddle.net/arunpjohny/cZb5b/1 déplacer la souris de l' elélément vers childet vérifier la console
Arun P Johny
@ArunPJohny s'il vous plaît relisez, c'est-à-dire mouseenter et mouseleave pas mouseover et mouseout.
Bhojendra Rauniyar
1
aussi avec hover - jsfiddle.net/arunpjohny/cZb5b/2 si vous pouvez analyser la console, vous pouvez trouver la différence ...
Arun P Johny

Réponses:

113

À partir de la documentation officielle de jQuery

  • .mouseover()
    Liez un gestionnaire d'événements à l'événement JavaScript "mouseover" ou déclenchez cet événement sur un élément.

  • .hover() Liez un ou deux gestionnaires aux éléments correspondants, à exécuter lorsque le pointeur de la souris entre et sort des éléments.

    L'appel $(selector).hover(handlerIn, handlerOut)est un raccourci pour: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Liez un gestionnaire d'événements à déclencher lorsque la souris entre dans un élément ou déclenchez ce gestionnaire sur un élément.

    mouseoverse déclenche également lorsque le pointeur se déplace dans l'élément enfant, tandis que se mouseenterdéclenche uniquement lorsque le pointeur se déplace dans l'élément lié.

Qu'est-ce que cela signifie

Pour cette raison, ce .mouseover()n'est pas le même que .hover(), pour la même raison, ce .mouseover()n'est pas le même que .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)
Navin Rauniyar
la source
31

.hover()function accepte deux arguments de fonction, un pour l' mouseenterévénement et un pour l' mouseleaveévénement.

Michik
la source
c'est un excellent point en termes de différences entre les deux fonctions mentionnées dans le titre de la question, merci! consultez le lien ci-dessous sur w3schools pour savoir comment fonctionne .hover (): w3schools.com/jquery/event_hover.asp
Bahman.A
8

Vous pouvez l'essayer http://api.jquery.com/mouseover/ sur la page de documentation jQuery. C'est une jolie petite démo interactive qui le rend très clair et que vous pouvez voir par vous-même.

En bref, vous remarquerez qu'un événement de survol de la souris se produit sur un élément lorsque vous le survolez - provenant de son élément enfant OU parent, mais un événement d'entrée de la souris ne se produit que lorsque la souris passe de l'élément parent à l'élément.

Shivaji Ranaware
la source
1

À partir de la documentation officielle: ( http://api.jquery.com/hover/ )

La méthode .hover () lie les gestionnaires pour les événements mouseenter et mouseleave. Vous pouvez l'utiliser pour appliquer simplement un comportement à un élément pendant que la souris se trouve dans l'élément.

Wottensprels
la source
1

Comme vous pouvez le lire sur http://api.jquery.com/mouseenter/

L'événement JavaScript mouseenter est propriétaire d'Internet Explorer. En raison de l'utilité générale de l'événement, jQuery simule cet événement afin qu'il puisse être utilisé quel que soit le navigateur. Cet événement est envoyé à un élément lorsque le pointeur de la souris entre dans l'élément. Tout élément HTML peut recevoir cet événement.

Edorka
la source