Heim >Web-Frontend >js-Tutorial >Einführung in die Verwendung von JQuery-Hover
Ü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!