É possível usar o jQuery .on e pairar?

Eu tenho um <ul>que é preenchido com javascript após o carregamento da página inicial. Atualmente, estou usando .bindcom mouseovere mouseout.

O projeto acabou de ser atualizado para o jQuery 1.7, por isso tenho a opção de usá-lo .on, mas não consigo fazê-lo funcionar hover. É possível usar .oncom hover?

EDIT : Os elementos aos quais estou vinculando são carregados com javascript após o carregamento do documento. É por isso que estou usando one não apenas hover.

( Veja a última edição nesta resposta se precisar usar .on()com elementos preenchidos com JavaScript )

Use isso para elementos que não são preenchidos usando JavaScript:

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

.hover()tem seu próprio manipulador: http://api.jquery.com/hover/

Se você deseja fazer várias coisas, encadeie-as no .on()manipulador da seguinte maneira:

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

De acordo com as respostas fornecidas a seguir você pode usar hovercom .on(), mas:

Embora fortemente desanimado com o novo código, você pode ver o nome do pseudo-evento "hover" usado como uma abreviação para a sequência "mouseenter mouseleave". Ele anexa um único manipulador de eventos para esses dois eventos, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do pseudo-evento "hover" com o método .hover (), que aceita uma ou duas funções.

Além disso, não há vantagens de desempenho em usá-lo e é mais volumoso do que apenas usar mouseenterou mouseleave. A resposta que forneci requer menos código e é a maneira correta de obter algo assim.

EDITAR

Já faz um tempo desde que essa pergunta foi respondida e parece ter ganhado alguma força. O código acima ainda permanece, mas eu queria adicionar algo à minha resposta original.

Embora prefira usar mouseentere mouseleave(me ajude a entender o que está acontecendo no código) .on(), é o mesmo que escrever o seguinte comhover()

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

Desde a pergunta original fez perguntar como eles poderiam usar corretamente on()com hover(), eu pensei que iria corrigir o uso de on()e não achar que é necessário adicionar o hover()código no momento.

EDIÇÃO 11 DE DEZEMBRO DE 2012

Algumas novas respostas fornecidas abaixo detalham como .on()deve funcionar se o divem questão for preenchido usando JavaScript. Por exemplo, digamos que você preencha um evento divusando jQuery .load(), assim:

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

O código acima para .on()não seria válido. Em vez disso, você deve modificar seu código levemente, assim:

$(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 um elemento preenchido com JavaScript após a .load()ocorrência de um evento. Apenas mude seu argumento para o seletor apropriado.

Nenhuma dessas soluções funcionou para mim ao passar o mouse sobre os objetos criados após o carregamento do documento, conforme a pergunta solicitada. Sei que essa pergunta é antiga, mas tenho uma solução para quem ainda procura:

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

Isso vinculará as funções ao seletor, para que objetos com esse seletor feito após o documento estar pronto ainda possam chamá-lo.

Não sei como é o restante do seu Javascript, por isso não poderei dizer se há alguma interferência. Mas .hover()funciona muito bem como um evento com .on().

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

Se você deseja utilizar seus eventos, use o objeto retornado do 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/

A função hover jQuery oferece funcionalidade de passagem e saída do mouse.

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

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

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

Apenas naveguei na web e achei que poderia contribuir. Notei que, com o código acima publicado por @calethebrewer, pode resultar em várias chamadas pelo seletor e comportamento inesperado, por exemplo: -

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

Este violino http://jsfiddle.net/TWskH/12/ ilustra meu ponto de vista. Ao animar elementos como os plugins, descobri que esses múltiplos gatilhos resultam em comportamento não intencional, o que pode resultar na animação ou no código ser chamado mais do que o necessário.

Minha sugestão é simplesmente substituir por mouseenter / mouseleave: -

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

Embora isso evitasse que várias instâncias da minha animação fossem chamadas, eu finalmente passei o mouse sobre o mouse / mouse, pois precisava determinar quando os filhos do pai estavam passando o mouse.

Você pode usar .on()com hoverfazendo o que a seção Additional Notes diz:

Embora fortemente desanimado com o novo código, você pode ver o nome do pseudo-evento "hover" usado como uma abreviação para a sequência "mouseenter mouseleave". Ele anexa um único manipulador de eventos para esses dois eventos, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do pseudo-evento "hover" com o método .hover (), que aceita uma ou duas funções.

Isso seria o seguinte:

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

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

});

EDIT (observação para usuários do jQuery 1.8+):

Descontinuado no jQuery 1.8, removido no 1.9: O nome "hover" usado como uma abreviação para a sequência "mouseenter mouseleave". Ele anexa um único manipulador de eventos para esses dois eventos, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do pseudo-evento "hover" com o método .hover (), que aceita uma ou duas funções.

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

Você pode fornecer um ou vários tipos de eventos separados por um espaço.

Então hoveré igualmouseenter mouseleave .

Esta é a minha sugestão:

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

Se você precisa ter como condição em outro evento, resolvi-o desta maneira:

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

Em outro evento, você pode usá-lo facilmente:

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

(Vejo alguns usando is(':hover')para resolver isso. Mas este ainda não é um seletor jQuery válido e não funciona em todos os navegadores compatíveis)

O plugin jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html vai muito além das abordagens ingênuas listadas aqui. Embora eles certamente funcionem, eles podem não necessariamente se comportar como os usuários esperam.

O motivo mais forte para usar o hoverIntent é o tempo limite recurso de . Ele permite que você faça coisas como impedir que um menu seja fechado porque um usuário arrasta o mouse levemente demais para a direita ou esquerda antes de clicar no item desejado. Ele também fornece recursos para não ativar eventos de foco em uma barragem e aguarda foco focalizado.

Exemplo 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 )

Maiores explicações sobre isso podem ser encontradas em https://stackoverflow.com/a/1089381/37055