Verwendung von Hover in jQuery

Im heutigen Beitrag werden wir etwas über das Ereignis .hover() in jQuery erfahren.

Verwendung von .hover() in jQuery

Der .hover()-Ansatz von JQuery bindet einen oder beide Handler an die Übereinstimmungsfaktoren, um sie gleichzeitig abzuschließen, wenn der Mauszeiger die Elemente betritt und verlässt. Abhängig von den Binder-Handlern gibt es drei Arten von Parametern, die der .hover()-Ansatz annehmen kann.

Syntax:

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

Parameter:

1. handlerInFn: Wenn der Mauszeiger das Element betritt, muss diese Funktion aufgerufen/ausgeführt werden.
2. handlerOutFn: Wenn der Mauszeiger das Element verlässt, muss diese Funktion aufgerufen/ausgeführt werden.
3. handlerInOutFn: Wenn der Mauszeiger das Element betritt oder verlässt, muss diese Funktion aufgerufen/ausgeführt werden.

Der .hover()-Ansatz bindet Controller für eine Maus, um sich in und aus Aktivitäten zu bewegen. Sie können es verwenden, um das Verhalten des Elements zu einem bestimmten Zeitpunkt zu beobachten, wenn sich die Maus innerhalb des Details befindet.

Die .hover()-Technik führt diesen Handler sowohl bei der Eingabe als auch bei der Ausgabe der Maus aus, selbst wenn Sie eine einzelne Funktion übergeben. Dies soll die Person je nach event.type die verschiedenen Toggle-Techniken von jQuery innerhalb des Handlers verwenden oder innerhalb des Handlers außergewöhnlich reagieren.

Weitere Informationen finden Sie in der Dokumentation zum .hover()-Ansatz hier.

Lassen Sie uns .hover() mit dem folgenden Beispiel verstehen:

HTML Quelltext:

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

JavaScript-Code:

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

Mit dem Element ul haben wir im obigen Beispiel eine Betriebssystemliste beschrieben. Wenn Sie anfangen, mit der Maus über die Auflistung zu schweben, folgt es dem Aufprall des Schwebens auf das Element, und die entsprechende Funktion wird dann ausgeführt.

Wenn Sie in der obigen Instanz den Mauszeiger über Linux bewegen, wird der Textwert für das Element gedruckt.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Es wird das unten angegebene Ergebnis angezeigt:

Ausgabe:

"Linux"

Siehe die funktionierende Demo des Codes hier.