使用 jQuery 在悬停时在 ul 中显示 div，但它卡在隐藏上？

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

当可能涉及子元素时，不要使用“this”，如果通过在 div 上拖出来保留 a 元素，那么在某些情况下“this”可能是 div 而不是 a。

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

IE

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