So setzen Sie den Hover in JQuery

Bei der Front-End-Entwicklung müssen Elemente auf der Webseite normalerweise mit der Maus des Benutzers interagieren. Der häufigste Effekt ist der Hover-Effekt: Wenn die Maus über das Element schwebt, erfährt das Element einige visuelle Änderungen, z. Größe usw. . Zu diesem Zeitpunkt müssen wir die Hover-Methode in jQuery verwenden, um dies zu erreichen.

Jetzt werde ich im Detail vorstellen, wie man die Hover-Methode in jQuery verwendet, um den Hover-Effekt festzulegen.

1. Die grundlegende Syntax der hover()-Methode in jQuery

Wir müssen zunächst die grundlegende Syntax der hover()-Methode verstehen:

$(selector).hover(inFunction,outFunction)

Unter diesen ist der Selektor das ausgewählte Element und inFunction wird ausgeführt, wenn das Die Maus bewegt sich über das Element. Die Funktion outFunction ist die Funktion, die ausgeführt werden soll, wenn die Maus aus dem Element heraus bewegt wird. Es ist ersichtlich, dass wir mit der hover()-Methode verschiedene Funktionen ausführen können, wenn sich die Maus in das Element hinein und aus ihm heraus bewegt.

2. Verwenden Sie die Methode hover(), um den Hover-Effekt festzulegen. Als Nächstes zeigen wir, wie Sie die Methode hover() verwenden, um den Hover-Effekt festzulegen.

Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Als nächstes erstellen wir ein Beispielelement und fügen einige CSS-Stile hinzu:

<div class="example">hover me</div>

<style>
.example {
    width: 100px;
    height: 50px;
    background-color: #FFC0CB;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
}
</style>

Jetzt legen wir den Hover-Effekt für dieses Beispielelement fest. Wenn die Maus hinein bewegt wird, ändert sich die Hintergrundfarbe und der Textinhalt wird geändert; wenn die Maus heraus bewegt wird, wird das Element in seinen Ausgangszustand zurückversetzt.

<script>
$(function() {
    $(".example").hover(function() {
        // 鼠标移入时执行的函数
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠标移出时执行的函数
        $(this).css("background-color", "#FFC0CB");
        $(this).text("hover me");
    });
});
</script>

Erklären Sie den obigen Code:

• hover()-Methode wird in zwei Funktionen übergeben, die erste Funktion dient zum Bewegen der Maus in Die Funktion, die beim Herausziehen der Maus ausgeführt werden soll, ist die zweite Funktion die Funktion, die beim Herausziehen der Maus ausgeführt werden soll.
• Ändern Sie den Stil des Elements in diesen beiden Funktionen.
Auf diese Weise wird ein einfacher Hover-Effekt erzielt.

3. Andere Verwendungszwecke der hover()-Methode

Zusätzlich zu den oben genannten Verwendungszwecken hat die hover()-Methode noch andere Verwendungszwecke.

Bei dieser Verwendung muss nur eine Funktion übergeben werden, und diese Funktion wird gleichzeitig als Handlerfunktion für die Mausbewegungs- und Mausbewegungsereignisse festgelegt. Zum Beispiel:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    });
});

Wenn sich die Maus auf diese Weise in das .example-Element bewegt, ändert sich die Hintergrundfarbe in #ffc73d. Beim Entfernen treten keine Änderungen auf.

Diese Verwendung ähnelt hover(inFunction,outFunction), außer dass die Parameterpositionen der Funktion unterschiedlich sind. Zum Beispiel:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    }, function() {
        $(this).css("background-color", "#FFC0CB");
    });
});

Wenn sich die Maus auf diese Weise in das .example-Element bewegt, ändert sich die Hintergrundfarbe in #ffc73d. Beim Entfernen wird es wiederhergestellt.

4. Zusammenfassung

Oben erfahren Sie, wie Sie die hover()-Methode von jQuery verwenden, um den Hover-Effekt festzulegen. Bei der Verwendung müssen wir nur das Element auswählen, auf das der Effekt eingestellt werden soll, und dann die entsprechende Funktion über die Methode hover() übergeben.

Natürlich benötigen wir in der tatsächlichen Entwicklung möglicherweise auch komplexere Hover-Effekte wie Animationseffekte usw. In diesem Fall stellt jQuery eine leistungsstarke Animationseffektbibliothek bereit, mit der wir umfangreichere Hover-Effekte erzielen können.

Im Allgemeinen kann die von jQuery bereitgestellte hover()-Methode schnell und effektiv den Hover-Effekt von Webseitenelementen erzielen, wodurch die Effizienz der Front-End-Entwicklung erheblich verbessert wird und Entwickler sich mehr auf die Implementierung der Geschäftslogik konzentrieren können.

Das obige ist der detaillierte Inhalt vonSo setzen Sie den Hover in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!