jQuery的mouseOver事件问题

Question

嗨,

我正在构建一个菜单，其中出现了悬停在li上的一个.li_bcg。不幸的是，无论我做什么，当鼠标悬停在菜单上时，所有的li_bcg都会同时出现。

这是我的URL，也许是为了让它更清晰

<ul>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg"/>
    </li>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg" />
    </li>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg" />
    </li>
</ul>

和我的函数

var bcg = $('.li_bcg')

    $.each($('li a'), function(){
                         $('li a').mouseover(

                                function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 0} ,200)})}

                                    ),
                          $('li a').mouseout(

                                function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 1} ,200)})}                                  
                                    )
                            })

提前感谢您的帮助

Answer 1

这应该可以做到：

// hover( over, out )
$('ul > li > a').hover(function() {
        $(this).next(".li_bcg")
               .stop()
               .animate( {'opacity' : 0} ,200)});
    }, 

    function() {
        $(this).next(".li_bcg")
               .stop()
               .animate( {'opacity' : 1} ,200)});
    }
);

您可以使用next直接获取悬停超链接之后的下一个同级(.li_bcg) div。也不是hover方法：

模拟悬停(在对象上和对象上移动鼠标)。

我已经将hover的函数签名作为注释包含在代码之上。

Answer 2

没有测试，但应该是您正在寻找的：

$('li').mouseover(function(ev){
  $(this).find('.li_bcg').show();
});

或者，仅检测悬停在

$('li a').mouseover(function(ev){
  $(this).parent().find('.li_bcg').show();
});

然后为mouseout添加相反的值

Answer 3

这与预期不谋而合，因为$('.li_bcg')会返回包含此类的所有div。您需要使用$(this).find('.li_bcg')将其过滤到触发事件的LI的子div