使用jQuery在ul上悬停显示div，但它被卡在hide上？

Question

所以基本上我试图为我的网站导航创建一个水平ul。当您将鼠标悬停在每个链接下方时，我想要一个div出现跳动。动画在悬停时正常​​工作，但在鼠标悬停时div不会总是消失。我是jQuery的新手，所以我不确定我做错了什么。非常感谢任何帮助！

//append a div with class blue-hover to all li elements in main-nav 
    $('#main-nav li a').append('<div class="blue-hover"><\/div>'); 

    $('#main-nav li a').hover(

    //Mouseover, show the hidden blue-hover class with a bounce on hover 
    function() { 

     $(this).children('div').stop(true, true).show().effect("bounce", 
     {times:1}, 300); 

    }, 

    //Mouseout, fadeOut the hover class 
    function() { 

     $(this).children('div').stop(true, true).fadeTo(0,300); 

    }); 

Answer 1

不要用“这个”，当子元素可以参与，如果你通过拖动出过格，然后在某些情况下“本”可能是DIV，而不是一个离开的一个元素。

将eventObject参数的currentTarget用于悬停离开处理程序以查找给定事件冒泡的当前目标。

即

function(ev) { 
     $(ev.currentTarget).children('div').stop(true, true).fadeTo(0,300); 
    })