Wie schreibe ich Hover in JQuery?

hover ist ein häufig verwendeter interaktiver Effekt in JQuery, der entsprechende Ereignisse auslösen kann, wenn die Maus schwebt oder geht. So schreiben Sie Hover in JQuery.

1. Hover für ein einzelnes Element verwenden

Sie können die hover()-Methode von jquery verwenden, um Handler für Mouseover- und Leave-Ereignisse für ein einzelnes Element hinzuzufügen.

$("element").hover(
    function(){
        $(this).addClass("hover");//添加hover类名
    },
    function(){
        $(this).removeClass("hover");//移除hover类名
    }
);

Im obigen Code wählen wir zuerst ein Element aus und verwenden dann die Methode hover(), um einen Ereignishandler hinzuzufügen. Wenn sich die Maus in das Element bewegt, wird die erste Funktion ausgeführt, die den Hover-Klassennamen zum Element hinzufügt. Wenn sich die Maus aus dem Element bewegt, wird die zweite Funktion ausgeführt, die den Hover-Klassennamen aus dem Element entfernt .

2. Hover für mehrere Elemente verwenden

Wenn Sie den Hover-Effekt für mehrere Elemente erzielen müssen, können wir dies erreichen, indem wir jedes Element durchlaufen und dann die hover()-Methode aufrufen.

$(".elements").each(function(){
    $(this).hover(
        function(){
            $(this).addClass("hover");//添加hover类名
        },
        function(){
            $(this).removeClass("hover");//移除hover类名
        }
    );
});

Im obigen Code wählen wir zuerst alle Elemente aus, verwenden dann die Methode every(), um jedes Element zu durchlaufen, und rufen dann die Methode hover() auf, um Ereignishandler hinzuzufügen.

3. Hover-Abkürzungsmethode

jquery bietet uns eine praktische Möglichkeit, den Hover-Effekt abzukürzen. Wir können die Methode „mouseenter()“ verwenden, um den ersten Parameter der Methode „hover()“ zu ersetzen. Ebenso können wir die Methode „mouseleave()“ verwenden, um den zweiten Parameter der Methode „hover()“ zu ersetzen.

$("element").mouseenter(function(){
    $(this).addClass("hover");//添加hover类名
}).mouseleave(function(){
    $(this).removeClass("hover");//移除hover类名
});

Im obigen Code verwenden wir die Methode „mouseenter()“, um den Ereignishandler für das Einfahren der Maus hinzuzufügen, die Methode „mouseleave()“, um den Ereignishandler für das Herausziehen der Maus hinzuzufügen, und verwenden Kettenaufrufe, um den Code zu vereinfachen.

Zusammenfassung

Hover ist ein häufig verwendeter interaktiver Effekt in JQuery, der entsprechende Ereignisse auslösen kann, wenn die Maus darüber schwebt oder geht. jquery bietet die hover()-Methode und die Abkürzungsmethode, mit denen einzelne oder mehrere Elemente problemlos mit Hover-Effekten versehen werden können. Bei der Verwendung von Hover müssen Sie darauf achten, Ereignisse nicht mehrfach auszulösen, um die Leistung zu verbessern.

Das obige ist der detaillierte Inhalt vonWie schreibe ich Hover in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!