与嵌套元素jQuery的悬停事件(jQuery hover event with nested el

我现在有你的基本的，运行的设施，工厂菜单树如下：

<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>

与“控制”类的div是隐藏的开始。 我希望发生的是，当你将鼠标悬停在一个礼，为各立秀控制器（当您移动鼠标了，他们再次隐藏）。 当你将鼠标悬停在嵌套里的一个出现问题，它显示的它的父母控制为好。 下面是我使用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");
        }
);

Answer 2:

实际上，你可以做到这一点没有JS虽然你需要对IE6的JS。

这样的事情可能工作：

$(this).children('div').css("display", "block");

甚至：

$(this).children('div').show();

这里“这”是李。

文章来源: jQuery hover event with nested elements