带有嵌套元素的 jQuery 悬停事件

Question

我目前得到了基本的、普通的菜单树，如下所示:

<ul id="nav">
  <li>
    <a href="#">home</a>
    <div class="controls">Some controls go here</div>
    <ul>
      <li>
        <a href="#">item 1</a>
        <div class="controls">Some controls go here</div>
      </li>
      <li>
        <a href="#">item 2</a>
        <div class="controls">Some controls go here</div>
      </li>
    </ul>
  </li>
</ul>

具有“controls”类的 div 一开始是隐藏的。我想要发生的是，当您将鼠标悬停在 li 上时，相应 li 的控件会显示(当您将鼠标移开时，它们会再次隐藏)。当您将鼠标悬停在其中一个嵌套的 li 上时，会出现问题，它也会显示其父控件。这是我正在使用的 jQuery:

    $("#nav li").hover(
        function() {
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
    );

Answer 1

尝试在悬停函数中停止事件传播，以防止事件向上冒泡到父级。您可能还想查看hoverIntent如果您的“悬停”元素靠得很近，该插件可以解决“闪烁”悬停效果的问题。

$("#nav li").hover(
    function(e) {
            e.stopPropagation();
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
);