( Sehen Sie sich die letzte Änderung in dieser Antwort an, wenn Sie .on()Elemente verwenden müssen, die mit JavaScript gefüllt sind. )
Verwenden Sie dies für Elemente, die nicht mit JavaScript gefüllt sind:
$(".selector").on("mouseover", function () {
//stuff to do on mouseover
});
.hover()hat einen eigenen Handler: http://api.jquery.com/hover/
Wenn Sie mehrere Dinge tun möchten, verketten Sie sie .on()wie folgt im Handler:
$(".selector").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
Entsprechend den unten angegebenen Antworten können Sie hovermit verwenden .on(), aber:
Obwohl von neuem Code dringend abgeraten wird, wird möglicherweise der Pseudoereignisname "hover" als Abkürzung für die Zeichenfolge "mouseenter mouseleave" verwendet. Es wird ein einzelner Ereignishandler für diese beiden Ereignisse angehängt, und der Handler muss event.type untersuchen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie den Pseudoereignisnamen "hover" nicht mit der Methode .hover (), die eine oder zwei Funktionen akzeptiert.
Es gibt auch keine Leistungsvorteile bei der Verwendung und es ist sperriger als nur die Verwendung von mouseenteroder mouseleave. Die Antwort, die ich gegeben habe, erfordert weniger Code und ist der richtige Weg, um so etwas zu erreichen.
BEARBEITEN
Es ist schon eine Weile her, dass diese Frage beantwortet wurde und sie scheint etwas an Zugkraft gewonnen zu haben. Der obige Code steht noch, aber ich wollte meiner ursprünglichen Antwort etwas hinzufügen.
Während ich es vorziehe, mouseenterund mouseleave(hilft mir zu verstehen, was im Code vor sich geht) zu verwenden .on(), ist es genauso, wie das Folgende mit zu schreibenhover()
$(".selector").hover(function () {
//stuff to do on mouse enter
},
function () {
//stuff to do on mouse leave
});
Da die ursprüngliche Frage war , wie sie richtig nutzen könnten on()mit hover(), dachte ich , ich würde die Nutzung korrigieren on()und fand es nicht notwendig , den hinzufügen hover()Code zu der Zeit.
EDIT 11. DEZEMBER 2012
Im Folgenden finden Sie einige neue Antworten, die erläutern, wie funktionieren .on()soll, wenn die divbetreffende Antwort mit JavaScript ausgefüllt wird. Angenommen, Sie divfüllen ein .load()Ereignis mit jQuery wie folgt aus:
(function ($) {
//append div to document body
$('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));
Der obige Code für .on()würde nicht stehen. Stattdessen sollten Sie Ihren Code wie folgt leicht ändern:
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector"); //pass the element as an argument to .on
Dieser Code funktioniert für ein Element, das nach einem .load()Ereignis mit JavaScript gefüllt ist. Ändern Sie einfach Ihr Argument in den entsprechenden Selektor.
mouseenterundmouseleave, wie von calebthebrewer vorgeschlagen.