Question

HI，

我正在建立一个菜单，其中悬停在li a .li_bcg上。不幸的是，无论什么病，当将鼠标悬停在菜单上时，所有li_bcg同时出现。

这是我的网址，可能会让它更清晰

<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

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

Answer 2

没有测试，但应该是你想要的：

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

或者，仅检测悬停在＆lt; a＆gt;：

上

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

然后为mouseout

添加反向

Answer 3

这应该这样做：

// 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的函数签名作为代码上方的注释包含在内。

mouseOver事件jQuery问题

3 个答案: