Heim > Artikel > Web-Frontend > Einführung in die Verwendung von JQuery-Hover

Einführung in die Verwendung von JQuery-Hover

黄舟Original: 2017-06-26 11:05:093801Durchsuche

Übersicht

Eine Methode, die Hover-Ereignisse simuliert (die Maus bewegt sich über ein Objekt und aus diesem heraus). Dies ist eine benutzerdefinierte Methode, die für häufig verwendete Aufgaben einen „Keep-in-it“-Status bereitstellt.

Wenn sich die Maus über ein passendes Element bewegt, wird die erste angegebene Funktion ausgelöst. Wenn sich die Maus aus diesem Element herausbewegt, wird die angegebene zweite Funktion ausgelöst. Darüber hinaus wird erkannt, ob sich die Maus noch in einem bestimmten Element befindet (z. B. einem Bild in einem Div). Wenn dies der Fall ist, bleibt sie weiterhin im „Hover“-Zustand, ohne das Move-Out-Ereignis auszulösen (Die Verwendung von Mouseout wurde behoben. Ein häufiger Fehler für Ereignisse).

Parameter

over, outFunction, FunctionV1.0

over: Die Funktion, die ausgelöst werden soll, wenn die Maus über das Element bewegt

out: Die Funktion soll ausgelöst werden, wenn sich die Maus aus dem Element herausbewegt. Funktion

outObjectV1.4

Ereignisfunktion, die die Ausführung auslöst, wenn sich die Maus auf oder aus einem Element bewegt

Beispiel

over,out Beschreibung:

MouseoverTabelle plus spezifische Klasse

jQuery Code:

$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

out Beschreibung:

Die Methode hovre() schaltet Methoden um, indem sie die Variable „handlerInOut“ bindet.

jQuery-Code:

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

<style type="text/css">
.hover {background:red};
</style>

Der Hover in den Klammern in addClass("hover") und removeClass("hover") sollte hier nur als Hover oder so geschrieben werden Sonst. Nein, so ist es nicht.

Die erste Antwort lautet: Ja, es muss nicht schweben.

Hover wird in dieser addClass geschrieben, weil der Name des vorherigen CSS-Klassenselektors hover ist (das heißt.hover {background:red};). Dieser Name kann in einen anderen Namen geändert werden. Hier ist ein funktionierender Code für Sie:

<html>
<head>
<title>hover demo</title>
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myStyle {
    background: red
}
;
</style>
</head>
<body>
 
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
 
    <script>
        $("td").hover(function() {
            $(this).addClass("myStyle");
        }, function() {
            $(this).removeClass("myStyle");
        });
    </script>
 
</body>
</html>

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von JQuery-Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwendet JQuery Undelegate, um Ereignisse zu entfernen, die mithilfe von Delegate an dynamisch erstellte Elemente gebunden sind?Nächster Artikel：Wie verwendet JQuery Undelegate, um Ereignisse zu entfernen, die mithilfe von Delegate an dynamisch erstellte Elemente gebunden sind?

In Verbindung stehende Artikel

Mehr sehen