javascript - jQuery .hover() 输入一个元素，但是如何在另一个元素上获取离开触发器

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

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

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