0

So basically I am trying to create a horizontal ul for my site nav. I want a div to appear below each link with a bounce when you hover over it. The animation is working correctly on hover however on mouseout the div doesn't always go away. I am new to jQuery so I'm not sure what I'm doing wrong. Any help very much appreciated!

    //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);   

    });
4

1 回答 1

0

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

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

IE

  function(ev) {
      $(ev.currentTarget).children('div').stop(true, true).fadeTo(0,300);
     })
于 2011-09-06T03:45:53.440 回答