Question

我正在尝试将鼠标悬停在元素上一段时间后出现的菜单。如果您将鼠标悬停在此元素上，但在设置的时间之前再拖放，则菜单将不会出现。这个想法是为了防止用户在他们只是快速地将鼠标移过元素时意外激活菜单。

默认情况下，我的CSS中的菜单设置为display:none;。然后，当他们成功悬停足够长的时间后，我会向其添加一个.active类，以将显示设置为block.

我的问题是，一旦鼠标在元素上方足够长（在我的测试用例中我将其设置为1秒），将鼠标悬停在新显示的菜单上计为鼠标输出并丢失菜单。我曾经假设，因为菜单是我正在听的元素的子元素，它仍然会被视为对该元素的鼠标。我猜错了！

Amazon.com's main menu是我正在努力实现的一个很好的例子。

这是我的HTML。

<div id="drop-nav-trigger">
  Menu

  <div class="drop-nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </div>

</div>

这是我的javascript。我有一些jQuery混乱在那里改变我的菜单类。

var timeoutId = null;
var el = document.getElementById("drop-nav-trigger");

/* Activate menu after a delay. */
el.addEventListener('mouseover',function() { 
                   timeoutId = window.setTimeout(function(){

  $(".drop-nav").addClass("active");

  }, 1000);
} );

// Cancel action if mouse moved out within 2 sec
 el.addEventListener('mouseout',function() {
  window.clearTimeout(timeoutId);
  $(".drop-nav").removeClass("active");
});

这是一个代码：http://codepen.io/jimmykup/pen/EVYbWx

Answer 1

tirck是使用mouseleave代替mouseout See Example

mouseleave事件与mouseout处理事件的方式不同冒泡。如果在这个例子中使用mouseout，那么当鼠标指针移出Inner元素，处理程序就是触发。这通常是不受欢迎的行为。 mouseleave事件，另一方面，只有当鼠标离开时才触发其处理程序它被绑定的元素，而不是后代。所以在这个例子中，当鼠标离开外部元素时触发处理程序，但不是内在元素。

来源：http://api.jquery.com/mouseleave/

定时鼠标悬停后激活弹出菜单，然后在鼠标输出时取消激活

1 个答案: