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

I've currently got your basic, run-of-the-mill menu tree as follows:

我现在有了基本的，普通的菜单树，如下所示：

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

The divs with the "controls" class are hidden to start with. What I want to happen is that when you hover over an li, the controls for that respective li show (when you move your mouse away, they hide again). The problem occurs when you hover over one of the nested li's, it display's it's parents controls as well. Here is the jQuery I'm using:

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

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

Thanks for your help. Remy

谢谢你的帮助。雷米

2 个解决方案

#1

Try stopping event propagation in the hover function to prevent the event from bubbling up to the parent. You might also want to look at the hoverIntent plugin to solve issues of "flashing" hover effects if your "hovered" elements are close together.

尝试在悬停功能中停止事件传播，以防止事件冒泡到父级。您可能还想查看hoverIntent插件，以解决“悬浮”元素靠近在一起时“闪烁”悬停效果的问题。

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

2 个解决方案

#1

更多相关文章

随机推荐