É possível usar jQuery .on e hover?

Eu tenho um

    que é preenchido com javascript após o carregamento da página inicial. Atualmente estou usando .bind com mouseover e mouseout .

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

    EDIT : os elementos que eu estou ligando para são carregados com javascript após o carregamento do documento. É por isso que estou usando e não apenas hover .

    ( Veja a última edição desta resposta se você 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ê quiser fazer várias coisas, encadeie-as no manipulador .on() forma:

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

    De acordo com as respostas fornecidas abaixo, você pode usar o hover com .on() , mas:

    Embora fortemente desencorajado por novos códigos, você pode ver o nome do pseudo-evento “hover” usado como um atalho para a string “mouseenter mouseleave”. Ele anexa um único manipulador de events para esses dois events, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do evento com o método .hover (), que aceita uma ou duas funções.

    Além disso, não há vantagens de desempenho para usá-lo e é mais volumoso do que apenas usando mouseenter ou mouseleave . A resposta que eu forneci requer menos código e é a maneira correta de conseguir algo assim.

    EDITAR

    Já faz um tempo que essa pergunta foi respondida e parece ter ganho alguma força. O código acima ainda está de pé, mas eu queria acrescentar algo à minha resposta original.

    Enquanto eu prefiro usar mouseenter e mouseleave (me ajuda a entender o que está acontecendo no código) com .on() é o mesmo que escrever o seguinte com hover()

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

    Como a pergunta original perguntava como eles poderiam usar corretamente on() com hover() , pensei em corrigir o uso de on() e não achei necessário adicionar o código hover() no momento.

    EDITAR DEZEMBRO 11, 2012

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

     (function ($) { //append div to document body $('
    Test
    ').appendTo(document.body); }(jQuery));

    O código acima para .on() não suportaria. Em vez disso, você deve modificar seu código um pouco, 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 

    Esse código funcionará para um elemento preenchido com JavaScript após um evento .load() ter ocorrido. Apenas mude seu argumento para o seletor apropriado.

    Nenhuma dessas soluções funcionou para mim ao passar o mouse sobre / fora de objects criados depois que o documento foi carregado conforme a pergunta é solicitada. Eu sei que essa pergunta é antiga, mas eu tenho uma solução para quem ainda está procurando:

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

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

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

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

    Se você quiser utilizar seus events, use o object 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/

    Você pode usar .on() com o hover , fazendo o que a seção Notas Adicionais diz:

    Embora fortemente desencorajado por novos códigos, você pode ver o nome do pseudo-evento “hover” usado como um atalho para a string “mouseenter mouseleave”. Ele anexa um único manipulador de events para esses dois events, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do evento com o método .hover (), que aceita uma ou duas funções.

    Isso seria fazer o seguinte:

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

    EDIT (nota para usuários do jQuery 1.8+):

    Deprecado no jQuery 1.8, removido em 1.9: O nome “hover” usado como um atalho para a string “mouseenter mouseleave”. Ele anexa um único manipulador de events para esses dois events, e o manipulador deve examinar event.type para determinar se o evento é mouseenter ou mouseleave. Não confunda o nome do evento 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'); 

    A function hover do jQuery oferece funcionalidade mouseover e mouseout.

    $ (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 pela web e senti que poderia contribuir. Eu notei que com o código acima postado por @calethebrewer pode resultar em várias chamadas sobre o 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 o meu ponto. Ao animar elementos, como em plugins, descobri que esses vários gatilhos resultam em um comportamento não intencional, o que pode fazer com que a animação ou o código seja chamado mais do que o necessário.

    Minha sugestão é simplesmente replace por mouse / mouseleave: –

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

    Embora isso tenha impedido que várias instâncias de minha animação fossem chamadas, acabei indo com mouseover / mouseleave, pois precisava determinar quando os filhos dos pais estavam sendo passados.

    Para elementos que são adicionados dinamicamente, consulte http://api.jquery.com/on/ . Estou citando partes principais: Manipuladores de events estão vinculados somente aos elementos atualmente selecionados; eles devem existir na página no momento em que seu código faz a chamada para .on (). Se o novo HTML estiver sendo injetado na página, é preferível usar events delegates para append um manipulador de events, conforme descrito a seguir.

    Os events delegates têm a vantagem de poder processar events de elementos descendentes que são adicionados ao documento posteriormente. Escolhendo um elemento com a garantia de estar presente no momento em que o manipulador de events delegado é anexado, você pode usar events delegates para evitar a necessidade de append e remover frequentemente manipuladores de events.

    Além de sua capacidade de manipular events em elementos descendentes ainda não criados, outra vantagem de events delegates é seu potencial de sobrecarga muito menor quando muitos elementos devem ser monitorados. Em uma tabela de dados com 1.000 linhas em seu corpo, este exemplo anexa um manipulador a 1.000 elementos:

     $("#dataTable tbody tr").on("mouseenter", function(event){ alert($(this).text()); }); 

    Uma abordagem de events delegates atribui um manipulador de events a apenas um elemento, o corpo e o evento precisam apenas subir um nível (do tr para o corpo):

     $("#dataTable tbody").on("mouseenter", "tr", function(event){ alert($(this).text()); }); 

    Nota: Os events delegates não funcionam para o SVG.

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

    Então hover é igual a mouseenter 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 assim:

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

    Então, em outro evento, você pode facilmente usá-lo:

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

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

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

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

    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 ) 

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