Jquery auf Hover funktioniert nicht

Question

Ich ändere meine Codes, um mit jQuery 1.8 kompatibel zu sein, und ich bin mit dieser hover fest, die nicht funktioniert. Als ich dann das selbe mit einem click benutzt habe, funktionierte es. Hier ist mein Code, kann mir jemand sagen, wo ich falsch liege?

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

Veraltete wie von jQuery 1.8: Der Name "schweben" verwendet als Abkürzung für die Zeichenfolge "MouseEnter- mouseleave". Es fügt einen einzelnen Ereignishandler für diese beiden Ereignisse an, und der Handler muss event.type prüfen, um festzustellen, ob das Ereignis mouseenter oder mouseleave ist. Verwechseln Sie nicht den Pseudo-Ereignisnamen "Hover" mit der .hover() -Methode, die eine oder zwei Funktionen akzeptiert.

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

so ziemlich sagt alles, man kann "schweben" für diese Verwendung:

$(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 Funktion hat nur 3 Parameter: http://api.jquery.com/on/

Wenn Sie nicht Ihre Handler dynamisch Elemente gebunden benötigen werden auch hinzugefügt, dann können Sie die gute alte hover Funktion mit 2 Ereignishandler verwenden.

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

By the way, ist $(selector).hover(handlerIn, handlerOut) Abkürzung für $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

Wenn Sie müssen, dann on für mouseenter und mouseleave Ereignisse verwenden:

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

gibt es keine "schweben" Ereignis. gibt es .hover() -Funktion, die 2 Rückrufe (wie in Ihrem Beispiel) dauert. Versuchen

Answer 4

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

Answer 5

diesen Code Versuchen mit jquery 1.8 Ich denke, dass die Arbeit gut:

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

Versuchen:

$(".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(); 
     }); 
    } 
}); 

OR

$(".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(); 
    }); 
    } 
});