Question

我正在尝试阻止在我正在开发的网站上立即触发大型megamenu，当用户将鼠标悬停在主菜单上而不一定想触发megamenu时，这对用户来说非常烦人。所以理想情况下会有半秒钟的延迟，以确保只有当用户在父菜单项上长时间聚焦时才触发megamenu，然后在鼠标输出megamenu时没有延迟。

基本标记示例如下：

<li class="parent">
<a href="#">Foo</a>
<div class="megamenu-block">
<....content >
</div>
</li>

div.megamenu-block {
    left: 0;
    position: absolute;
    top: auto;
    @include opacity(0);
}

li {
    &:hover div.megamenu-block {
        z-index: 1000;
        @include opacity(1);
        pointer-events: all;
    }

}

Answer 1

您想要在设定的一段时间后检查鼠标是否仍在父触发元素中。然后显示大型菜单。

$('#megaMenuHover').on('mouseenter', function(e) {
  timeout = setTimeout(function() {
    console.log('Current: ' + mousePos.x + ',' + mousePos.y);
    if(mousePos.x >= position.left && mousePos.x < maxX && mousePos.y > position.top && mousePos.y < maxY) {
      $('.megamenu-block').addClass('open');
      console.log('still hovering');
    }
    else {
      //do nothing as element is not still hovered
    }
  }, 250);
});

JS Fiddle

中的其他相关代码和工作示例

或者，您可以使用hoverIntent插件查找jQuery here

如何延迟megamenu立即出现悬停

1 个答案: