Wann sollten Sie die Funktionen mouseover () und hover () wählen?

112

Was sind die Unterschiede zwischen jQuery .mouseover()und .hover()Funktionen? Wenn sie völlig gleich sind, warum verwendet jQuery beide?

jquery mouseevent Bhojendra Rauniyar
quelle
4
Dies ist keine doppelte Frage. Ihr angegebener Link enthält Mouseover- und Mouseenter-Ereignisse, aber mein Mouseover- und Hover-Ereignis.
Bhojendra Rauniyar
1
Sie unterscheiden sich in der gleichen Weise wie Mouseover und Mouseleave, und die akzeptierte Antwort unten ist nicht korrekt. Die Hover-Funktion fügt ein Mouseenter- und Mouseleve-Ereignis hinzu, nicht Mouseover- und Mouseout-Ereignisse
Arun P Johny,
1
siehe jsfiddle.net/arunpjohny/cZb5b/1 Bewegen Sie die Maus vom elElement zur childKonsole und überprüfen Sie sie
Arun P Johny
@ArunPJohny bitte noch einmal lesen, das heißt mouseenter und mouseleave nicht mouseover und mouseout.
Bhojendra Rauniyar
1
auch mit hover - jsfiddle.net/arunpjohny/cZb5b/2 Wenn Sie die Konsole analysieren können, können Sie den Unterschied finden ...
Arun P Johny

Antworten:

113

Aus der offiziellen jQuery-Dokumentation

  • .mouseover()
    Binden Sie einen Ereignishandler an das JavaScript-Ereignis "mouseover" oder lösen Sie dieses Ereignis für ein Element aus.

  • .hover() Binden Sie einen oder zwei Handler an die übereinstimmenden Elemente, die ausgeführt werden, wenn der Mauszeiger die Elemente betritt und verlässt .

    Anrufen $(selector).hover(handlerIn, handlerOut)ist eine Abkürzung für: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Binden Sie einen Ereignishandler, der ausgelöst werden soll, wenn die Maus ein Element betritt, oder lösen Sie diesen Handler für ein Element aus.

    mouseoverwird ausgelöst, wenn sich der Zeiger ebenfalls in das untergeordnete Element bewegt, während er mouseenternur ausgelöst wird, wenn sich der Zeiger in das gebundene Element bewegt.

Was das bedeutet

Aus diesem Grunde , .mouseover()ist nicht das gleiche wie .hover(), aus dem gleichen Grund .mouseover()ist nicht wie das gleiche .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
quelle
31

.hover()Die Funktion akzeptiert zwei Funktionsargumente, eines für mouseenterEreignis und eines für mouseleaveEreignis.

Mischik
quelle
Dies ist ein großartiger Punkt in Bezug auf die Unterschiede zwischen den beiden im Fragentitel genannten Funktionen. Danke! Überprüfen Sie den Link unten auf w3schools, wie .hover () funktioniert: w3schools.com/jquery/event_hover.asp
Bahman.A
8

Sie können es unter http://api.jquery.com/mouseover/ auf der jQuery-Dokumentseite ausprobieren . Es ist eine nette kleine, interaktive Demo, die es sehr deutlich macht und Sie selbst sehen können.

Kurz gesagt, Sie werden feststellen, dass ein Mouse-Over-Ereignis für ein Element auftritt, wenn Sie sich darüber befinden - entweder von seinem untergeordneten oder übergeordneten Element. Ein Mauseingabeereignis tritt jedoch nur auf, wenn sich die Maus vom übergeordneten Element zum Element bewegt.

Shivaji Ranaware
quelle
1

Aus den offiziellen Dokumenten: ( http://api.jquery.com/hover/ )

Die .hover () -Methode bindet Handler sowohl für Mouseenter- als auch für Mouseleave-Ereignisse. Sie können es verwenden, um einfach ein Verhalten auf ein Element anzuwenden, während sich die Maus innerhalb des Elements befindet.

Wottensprels
quelle
1

Wie Sie unter http://api.jquery.com/mouseenter/ lesen können

Das Mouseenter-JavaScript-Ereignis ist Eigentum von Internet Explorer. Aufgrund des allgemeinen Dienstprogramms des Ereignisses simuliert jQuery dieses Ereignis, sodass es unabhängig vom Browser verwendet werden kann. Dieses Ereignis wird an ein Element gesendet, wenn der Mauszeiger das Element betritt. Jedes HTML-Element kann dieses Ereignis empfangen.

Edorka
quelle