Jquery al passaggio del mouse non funziona

Question

Sto cambiando i miei codici per essere compatibile con jQuery 1.8 e sono bloccato con questo hover che non funziona. Quando ho usato la stessa cosa con un click ha funzionato. Ecco il mio codice, qualcuno può dirmi dove sto andando male?

funzione

$(document).on('hover', '.top-level', function (event) { 
    $(this).find('.actionfcnt').show(); 
    $(this).find('.dropfcnt').show(); 
}, function() { 
    $(this).find('.dropfcnt').hide('blind', function() { 
    $('.actionfcnt').hide(); 
    }); 
}); 

Answer 1

deprecata come di jQuery 1.8: Il nome "hover" usato come una scorciatoia per la stringa "MouseEnter mouseLeave". Allega un singolo gestore di 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.

Fonte: http://api.jquery.com/on/#additional-notes

Questo dice praticamente tutto, non potete usare "hover" per questo:

$(document).on('mouseenter','.top-level', function (event) { 
    $(this).find('.actionfcnt').show(); 
    $(this).find('.dropfcnt').show(); 
}).on('mouseleave','.top-level', function(){ 
    $(this).find('.dropfcnt').hide('blind', function(){ 
     $('.actionfcnt').hide(); 
    }); 
}); 

Answer 2

.on ha solo 3 parametri: http://api.jquery.com/on/

Se non avete bisogno i gestori di essere vincolati ad elementi aggiunti dinamicamente così, allora si può utilizzare il buon vecchio funzione di hover con 2 gestori di eventi.

$('.top-level').hover(function (event) { 
    $(this).find('.actionfcnt').show(); 
    $(this).find('.dropfcnt').show(); 
}, function (event) { 
    $(this).find('.dropfcnt').hide('blind', function(){ 
    $('.actionfcnt').hide(); 
    }); 
});​ 

A proposito, $(selector).hover(handlerIn, handlerOut) è una scorciatoia per $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

Se è necessario, quindi utilizzare on per mouseenter e mouseleave eventi:

$(document).on('mouseenter', '.top-level', function (event) { 
    $(this).find('.actionfcnt').show(); 
    $(this).find('.dropfcnt').show(); 
}).on('mouseleave', '.top-level', function (event) { 
    $(this).find('.dropfcnt').hide('blind', function(){ 
    $('.actionfcnt').hide(); 
    }); 
});​ 

Answer 3

non c'è nessun caso "hover". c'è la funzione .hover() che accetta 2 callback (come nel tuo esempio).

Answer 4

Prova

$('.top-level').hover(function (event) { 
     $(this).find('.actionfcnt').show(); 
     $(this).find('.dropfcnt').show(); 
}, function(){ 
     $(this).find('.dropfcnt').hide('blind', function(){ 
      $('.actionfcnt').hide(); 
     }); 
}); 

Answer 5

provare questo codice con jQuery 1.8 Penso che il lavoro bene:

$(document).ready(function(){ 
    $('.top-level').hover(
     function() { 
      $(this).find('.actionfcnt').show(); 
      $(this).find('.dropfcnt').show(); 
     }, 
     function() { 
      $(this).find('.dropfcnt').hide('blind', function(){ 
       $('.actionfcnt').hide(); 
      }); 
     } 
    ); 
}); 

Answer 6

Prova:

$(".top-level").on({ 
    mouseenter: function (event) { 
     $(this).find('.actionfcnt').show(); 
     $(this).find('.dropfcnt').show(); 
    }, 
    mouseleave: function (event) { 
     $(this).find('.dropfcnt').hide('blind', function(){ 
      $('.actionfcnt').hide(); 
     }); 
    } 
}); 

O

$(".top_level").on("hover", function(event) { 
    if(event.type == "mouseenter") { 
    $(this).find('.actionfcnt').show(); 
    $(this).find('.dropfcnt').show(); 
    } 
    else if (event.type == "mouseleave") { 
    $(this).find('.dropfcnt').hide('blind', function(){ 
     $('.actionfcnt').hide(); 
    }); 
    } 
});