Ist es möglich, jQuery .on und hover zu verwenden?

Question

Ich habe eine <ul> die nach dem ersten Laden der Seite mit Javascript gefüllt wird. Ich verwende derzeit .bind mit mouseover と mouseout .

Das Projekt hat gerade auf jQuery 1.7 aktualisiert, so dass ich die Möglichkeit habe, zu verwenden .on aber ich scheine es nicht zum Funktionieren zu bringen mit hover . Ist es möglich, Folgendes zu verwenden .on mit hover ?

EDIT : Die Elemente, an die ich gebunden bin, werden mit Javascript geladen, nachdem das Dokument geladen wurde. Deshalb benutze ich on und nicht nur hover .

Answer 1

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Answer 2

Sie können Sie verwenden .on() mit hover indem Sie das tun, was im Abschnitt Zusätzliche Hinweise steht:

Obwohl bei neuem Code dringend davon abgeraten wird, können Sie Pseudo-Ereignis-Name "hover" als Abkürzung für die Zeichenfolge "Maus eingeben Maus verlassen". Es wird ein einziger Event-Handler für diese zwei Ereignisse, und der Handler muss event.type untersuchen, um festzustellen um festzustellen, ob das Ereignis "mouseenter" oder "mouseleave" ist. Verwechseln Sie nicht das Pseudo-Ereignisnamen "hover" nicht mit der Methode .hover(), die eine oder zwei Funktionen akzeptiert.

Das hieße, Folgendes zu tun:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

---

EDIT (Hinweis für jQuery 1.8+ Benutzer):

Veraltet in jQuery 1.8, entfernt in 1.9: Der Name "hover" wurde als Kurzform für die Zeichenfolge "mouseenter mouseleave". Es fügt ein einzelnes Ereignishandler für diese beiden Ereignisse, und der Handler muss event.type untersuchen, um festzustellen, ob es sich bei dem Ereignis um mouseenter oder mouseleave handelt. Der Pseudo-Ereignisname "hover" ist nicht mit der Methode .hover() zu verwechseln, die eine oder zwei Funktionen annimmt.

Answer 3

Sie können einen oder mehrere Ereignistypen angeben, die durch ein Leerzeichen getrennt sind.

Also hover ist gleich mouseenter mouseleave .

Dies ist mein Vorschlag:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Answer 4

Wenn Sie es als Bedingung für ein anderes Ereignis benötigen, habe ich es so gelöst:

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

Bei einem anderen Ereignis können Sie es dann einfach verwenden:

 if ($(this).data('hover')){
      //...
 }

(Ich sehe einige, die is(':hover') um dieses Problem zu lösen. Aber dies ist (noch) kein gültiger jQuery-Selektor und funktioniert nicht in allen kompatiblen Browsern)

Answer 5

Das jQuery-Plugin hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html geht viel weiter als die hier aufgeführten naiven Ansätze. Sie funktionieren zwar, verhalten sich aber nicht unbedingt so, wie die Nutzer es erwarten.

Der stärkste Grund für die Verwendung von hoverIntent ist die Timeout Funktion. Damit können Sie z. B. verhindern, dass ein Menü geschlossen wird, weil ein Benutzer seine Maus etwas zu weit nach rechts oder links zieht, bevor er auf das gewünschte Element klickt. Sie bietet auch die Möglichkeit, Hover-Ereignisse nicht zu aktivieren und auf gezieltes Hovering zu warten.

Beispiel für die Verwendung:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

Weitere Erklärungen hierzu finden Sie unter https://stackoverflow.com/a/1089381/37055