¿Es posible usar jQuery .on y hover?

Tengo un <ul>que se rellena con javascript después de la carga inicial de la página. Actualmente estoy usando .bindcon mouseovery mouseout.

El proyecto acaba de actualizarse a jQuery 1.7, así que tengo la opción de usar .on, pero parece que no puedo hacerlo funcionar hover. ¿Es posible usar .oncon hover?

EDITAR : los elementos a los que me estoy vinculando se cargan con javascript después de que se carga el documento. Es por eso que estoy usando ony no solo hover.

( Mire la última edición en esta respuesta si necesita usar .on()elementos rellenados con JavaScript )

Use esto para elementos que no se completan con JavaScript:

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

.hover()tiene su propio controlador: http://api.jquery.com/hover/

Si desea hacer varias cosas, encadénelas en el .on()controlador de la siguiente manera:

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

De acuerdo con las respuestas proporcionadas a continuación se puede utilizar hovercon .on(), pero:

Aunque se desaconseja encarecidamente el nuevo código, es posible que vea el pseudo-evento-nombre "hover" usado como una forma abreviada de la cadena "mouseenter mouseleave". Adjunta un único controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el nombre de pseudo-evento "hover" con el método .hover (), que acepta una o dos funciones.

Además, no hay ventajas de rendimiento al usarlo y es más voluminoso que solo usar mouseentero mouseleave. La respuesta que proporcioné requiere menos código y es la forma correcta de lograr algo como esto.

EDITAR

Ha pasado un tiempo desde que se respondió esta pregunta y parece haber ganado algo de tracción. El código anterior sigue en pie, pero quería agregar algo a mi respuesta original.

Si bien prefiero usar mouseentery mouseleave(me ayuda a comprender lo que está sucediendo en el código) con .on()él, es igual que escribir lo siguientehover()

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

Dado que la pregunta original hizo preguntan cómo podrían utilizar adecuadamente on()con hover(), pensé que iba a corregir el uso de on()y no nos pareció necesario añadir el hover()código en el momento.

EDITAR 11 DE DICIEMBRE DE 2012

Algunas nuevas respuestas proporcionadas a continuación detallan cómo .on()debería funcionar si la divpregunta en cuestión se completa con JavaScript. Por ejemplo, supongamos que llena un evento divusando jQuery .load(), de esta manera:

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

El código anterior para .on()no se mantendría. En cambio, debe modificar su código ligeramente, así:

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

Este código funcionará para un elemento poblado con JavaScript después de .load()que haya ocurrido un evento. Simplemente cambie su argumento al selector apropiado.

Ninguna de estas soluciones funcionó para mí al pasar el mouse sobre / fuera de los objetos creados después de que el documento se haya cargado como lo solicita la pregunta. Sé que esta pregunta es antigua pero tengo una solución para aquellos que todavía buscan:

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

Esto vinculará las funciones al selector para que los objetos con este selector realizado después de que el documento esté listo aún puedan llamarlo.

No estoy seguro de cómo se ve el resto de su Javascript, por lo que no podré saber si hay alguna interferencia. Pero .hover()funciona bien como un evento con .on().

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

Si desea poder utilizar sus eventos, use el objeto devuelto del 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 función de desplazamiento de jQuery proporciona funcionalidad de mouseover y mouseout.

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

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

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

Acabo de navegar desde la web y sentí que podía contribuir. Noté que con el código anterior publicado por @calethebrewer puede resultar en múltiples llamadas sobre el selector y un comportamiento inesperado, por ejemplo: -

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

Este violín http://jsfiddle.net/TWskH/12/ ilustra mi punto. Al animar elementos como los complementos, descubrí que estos disparadores múltiples provocan un comportamiento no deseado que puede provocar que la animación o el código se invoquen más de lo necesario.

Mi sugerencia es simplemente reemplazar con mouseenter / mouseleave: -

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

Aunque esto evitó que se llamaran varias instancias de mi animación, eventualmente fui con mouseover / mouseleave, ya que necesitaba determinar cuándo se cernían los hijos de los padres.

Se puede utilizar .on()con hoverhaciendo lo que la sección adicional Notas dice:

Aunque se desaconseja encarecidamente el nuevo código, es posible que vea el pseudo-evento-nombre "hover" usado como una forma abreviada de la cadena "mouseenter mouseleave". Adjunta un único controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el nombre de pseudo-evento "hover" con el método .hover (), que acepta una o dos funciones.

Eso sería hacer lo siguiente:

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

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

});

EDITAR (nota para usuarios de jQuery 1.8+):

Desaprobado en jQuery 1.8, eliminado en 1.9: el nombre "hover" se usa como una forma abreviada de la cadena "mouseenter mouseleave". Adjunta un único controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el nombre de pseudo-evento "hover" con el método .hover (), que acepta una o dos funciones.

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

Puede proporcionar uno o varios tipos de eventos separados por un espacio.

Entonces hoveres igualmouseenter mouseleave .

Esta es mi sugestión:

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

Si necesita que tenga como condición en otro evento, lo resolví de esta manera:

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

Luego, en otro evento, puede usarlo fácilmente:

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

(Veo algunos usando is(':hover')para resolver esto. Pero esto no es (todavía) un selector jQuery válido y no funciona en todos los navegadores compatibles)

El complemento jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html va mucho más allá de los enfoques ingenuos enumerados aquí. Si bien ciertamente funcionan, es posible que no se comporten necesariamente como esperan los usuarios.

La razón más poderosa para usar hoverIntent es la función de tiempo de espera . Le permite hacer cosas como evitar que se cierre un menú porque un usuario arrastra el mouse un poco demasiado a la derecha o izquierda antes de hacer clic en el elemento que desea. También proporciona capacidades para no activar eventos de desplazamiento en un aluvión y espera un desplazamiento centrado.

Ejemplo de uso:

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 )

Se puede encontrar una explicación más detallada de esto en https://stackoverflow.com/a/1089381/37055