È possibile utilizzare jQuery .on e hover?

Ho un <ul>popolato con javascript dopo il caricamento della pagina iniziale. Attualmente sto usando .bindcon mouseovere mouseout.

Il progetto è appena stato aggiornato a jQuery 1.7, quindi ho l'opzione da usare .on, ma non riesco a farlo funzionare hover. È possibile utilizzare .oncon hover?

EDIT : Gli elementi a cui sto vincolando vengono caricati con JavaScript dopo il caricamento del documento. Ecco perché sto usando one non solo hover.

( Guarda l'ultima modifica in questa risposta se hai bisogno di usare .on()con elementi popolati con JavaScript )

Usalo per elementi che non sono popolati usando JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()ha il suo gestore: http://api.jquery.com/hover/

Se vuoi fare più cose, incatenali nel .on()gestore in questo modo:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

In base alle risposte fornite di seguito è possibile utilizzare hovercon .on(), ma:

Sebbene fortemente scoraggiato per il nuovo codice, potresti vedere lo pseudo-nome-evento "hover" usato come una scorciatoia per la stringa "mouseenter mouseleave". Allega un singolo gestore eventi per questi due eventi e il gestore deve esaminare event.type per determinare se l'evento è mouseenter o mouseleave. Non confondere lo pseudo-evento-nome "hover" con il metodo .hover (), che accetta una o due funzioni.

Inoltre, non ci sono vantaggi prestazionali nell'usarlo ed è più voluminoso del semplice utilizzo di mouseentero mouseleave. La risposta che ho fornito richiede meno codice ed è il modo corretto per ottenere qualcosa del genere.

MODIFICARE

È passato un po 'di tempo da quando è stata data una risposta a questa domanda e sembra aver guadagnato una certa trazione. Il codice sopra riportato rimane valido, ma volevo aggiungere qualcosa alla mia risposta originale.

Mentre preferisco usare mouseentere mouseleave(mi aiuta a capire cosa sta succedendo nel codice) con .on()esso è lo stesso di scrivere quanto segue conhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Dal momento che la domanda iniziale ha chiesto come avrebbero potuto usare correttamente on()con hover(), ho pensato di correggere l'uso di on()e non ha trovato necessario aggiungere il hover()codice al momento.

MODIFICA 11 DICEMBRE 2012

Alcune nuove risposte fornite di seguito in dettaglio come .on()dovrebbero funzionare se la divdomanda in questione viene popolata utilizzando JavaScript. Ad esempio, supponiamo di popolare un evento divusando jQuery .load(), in questo modo:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

Il codice sopra per .on()non reggerebbe. Invece, dovresti modificare leggermente il tuo codice, in questo modo:

$(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

Questo codice funzionerà per un elemento popolato con JavaScript dopo che .load()si è verificato un evento. Basta cambiare argomento per il selettore appropriato.

Nessuna di queste soluzioni ha funzionato per me durante il mouse su / fuori oggetti creati dopo che il documento è stato caricato come richiesto dalla domanda. So che questa domanda è vecchia ma ho una soluzione per chi è ancora alla ricerca:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

Ciò vincolerà le funzioni al selettore in modo che gli oggetti con questo selettore creati dopo che il documento è pronto saranno ancora in grado di chiamarlo.

Non sono sicuro di come sia il resto del tuo Javascript, quindi non sarò in grado di dire se ci sono interferenze. Ma .hover()funziona perfettamente come un evento con .on().

$("#foo").on("hover", function() {
  // disco
});

Se vuoi essere in grado di utilizzare i suoi eventi, usa l'oggetto restituito dall'evento:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

La funzione hover jQuery offre funzionalità di mouseover e mouseout.

$ (Selector) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Fonte: http://www.w3schools.com/jquery/event_hover.asp

Sono appena arrivato dal web e ho sentito che avrei potuto contribuire. Ho notato che con il codice sopra riportato pubblicato da @calethebrewer può causare più chiamate sul selettore e comportamenti imprevisti, ad esempio: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

Questo violino http://jsfiddle.net/TWskH/12/ illustra il mio punto. Durante l'animazione di elementi come nei plug-in ho scoperto che questi trigger multipli provocano comportamenti involontari che possono comportare la chiamata dell'animazione o del codice più del necessario.

Il mio suggerimento è semplicemente di sostituire con mouseenter / mouseleave: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

Anche se questo ha impedito di chiamare più istanze della mia animazione, alla fine sono andato con il mouseover / mouseleave come avevo bisogno per determinare quando i figli del genitore venivano sorvolati.

È possibile utilizzare .on()con hoverfacendo quello che dice la sezione Avanzate Note:

Sebbene fortemente scoraggiato per il nuovo codice, potresti vedere lo pseudo-nome-evento "hover" usato come una scorciatoia per la stringa "mouseenter mouseleave". Allega un singolo gestore eventi per questi due eventi e il gestore deve esaminare event.type per determinare se l'evento è mouseenter o mouseleave. Non confondere lo pseudo-evento-nome "hover" con il metodo .hover (), che accetta una o due funzioni.

Quello sarebbe quello di fare quanto segue:

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

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

});

EDIT (nota per gli utenti di jQuery 1.8+):

Obsoleto in jQuery 1.8, rimosso in 1.9: il nome "hover" usato come scorciatoia per la stringa "mouseenter mouseleave". Allega un singolo gestore eventi per questi due eventi e il gestore deve esaminare event.type per determinare se l'evento è mouseenter o mouseleave. Non confondere lo pseudo-evento-nome "hover" con il metodo .hover (), che accetta una o due funzioni.

$("#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');

È possibile fornire uno o più tipi di eventi separati da uno spazio.

Quindi hoveruguale mouseenter mouseleave.

Questo è il mio suggerimento:

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

Se ne hai bisogno per avere come condizione in un altro evento, l'ho risolto in questo modo:

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

Quindi, in un altro evento, puoi facilmente usarlo:

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

(Vedo alcuni usando is(':hover')per risolvere questo. Ma questo non è (ancora) un selettore jQuery valido e non funziona in tutti i browser compatibili)

Il plugin jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html va molto oltre gli approcci ingenui elencati qui. Sebbene funzionino sicuramente, potrebbero non comportarsi necessariamente come si aspettano gli utenti.

Il motivo più forte per utilizzare hoverIntent è la funzionalità di timeout . Ti consente di fare cose come impedire la chiusura di un menu perché un utente trascina il mouse leggermente troppo a destra o a sinistra prima di fare clic sull'elemento desiderato. Fornisce inoltre funzionalità per non attivare gli eventi di passaggio del mouse in una raffica e attende il passaggio del mouse mirato.

Esempio di utilizzo:

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 )

Ulteriori spiegazioni al riguardo sono disponibili su https://stackoverflow.com/a/1089381/37055