Einführung in die Verwendung von JQuery-Hover-js-Tutorial-php.cn

Einführung in die Verwendung von JQuery-Hover

黄舟

Freigeben： 2017-06-26 11:05:09

Original

3834 Leute haben es durchsucht

Ü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"); } );

Nach dem Login kopieren

out Beschreibung:

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

jQuery-Code:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!