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() {
        // 鼠標(biāo)移入時執(zhí)行的函數(shù)
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠標(biāo)移出時執(zhí)行的函數(shù)
        $(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!