Question

我有这个简单的jq：

$(document).ready(function($) {
  $('#navigation ul li').hover(function(){
    $(this).find("ul").addClass("MenuBarSubmenuVisible");
  }, function(){
   $(this).find("ul").removeClass("MenuBarSubmenuVisible");
  });
});

但是问题是因为.hover事件绑定到$('#navigation ul li')元素，但是我想要在剩下mouseLeave时触发悬停函数的$('#navigation ul li ul')部分，除了它必须是$(this)实例，因为会有多个ul li ul。

我不能简单地通过CSS（使用之前开发的网站）来实现这一点，因为它正在应用类并执行各种其他奇怪的事情。

非常感谢。

Answer 1

就个人而言，我总是在创建使用一些jquery效果增强的菜单链接时始终使用此代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 jQuery(".sf-menu a").mouseenter(function(){
      jQuery(this).stop().addClass("MenuBarSubmenuVisible");
    });
    jQuery(".sf-menu a").mouseleave(function(){
      jQuery(this).stop().removeClass("MenuBarSubmenuVisible");
          });

    });
</script>

'.stop'停止“古怪”，例如当用户快速通过链接传递他/她的鼠标时排队的动画。

这是一个jsfiddle：http://jsfiddle.net/K7Y6w/11/

Answer 2

在你的情况下，我会将mousenter和mouseleave方法/选择器分开：

$(document).ready(function($) {
    $('#navigation ul').on('mouseenter','li', function() {
            $(this).find("ul").addClass("MenuBarSubmenuVisible");
    }).on('mouseout','li ul',function() {
        $(this).removeClass("MenuBarSubmenuVisible");
    });
});

jQuery .hover（）输入一个元素，但是如何在另一个元素上获取leave触发器

2 个答案: