jQuery 悬停意图，当间隔大于 0 时子菜单消失/错误

Question

我目前正在使用 jQuery Hover Intent 插件在触发菜单悬停时添加初始延迟。

HTML:

<div>
    <ul>
        <li class="link hover"><a href="#">Hover</a></li>
    </ul>
</div>

<div class="sub hover">
     <h1>Sub Section</h1>
</div>

JS:

// Vars
var timeout;

// Show Menu
function showMenu() {
    clearTimeout(timeout);
    $('.sub').fadeIn(50);
}

// Hide Menu
function hideMenu() {
    timeout = setTimeout(function () {
        $('.sub').fadeOut(50);
    }, 100);
}

// Settings
var config = {
    interval: 50, // time between reading/comparing mouse coordinates
    timeout: timeout, // time before out function is called
    over: showMenu,
    out: hideMenu
};

// Initialise Hover
$('.hover').hoverIntent(config);

在配置中，当间隔设置为 0 时，容器之间的切换工作正常。

当我将间隔设置为大于 0 时，在容器内和容器外悬停会出现错误（子菜单闪烁并消失）。但是我需要为初始延迟设置间隔。

JS Fiddle: http://jsfiddle.net/hfx7ucnw/4/

Answer 1

编辑 - 新答案

好的伙计。如果你有这个 html 并且你无法更改它，请在每次触发 mouseenter 或 over 时尝试 .stop(true) fadeOut 动画以防止 fadeOut.

我不知道 hoverIntent 插件是否可行，但您可以改用此代码：

$(".hover").on({
    "mouseenter" : function(e){
        $(".sub").stop(true);
        $(".sub").fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").delay(50).fadeOut();
    },
})

编辑 #2 - 防止意外过度

为了防止意外过度，如果用户“超过”.hover 按钮（但不是在 .sub 结束时），则为淡入效果添加延迟。

并且还在 mouseleave 中添加 .stop(true) 以防止在“快速移动”时淡入：

$(".hover,.sub").on({
    "mouseenter" : function(e){
        _delay = ($(this).hasClass("hover")) ? 200 : 0 ;
        $(".sub").stop(true);
        $(".sub").delay(_delay).fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").stop(true);
        $(".sub").delay(50).fadeOut();
    },
})

使用延迟和淡入时间来创造最佳性能。

示例：http://jsfiddle.net/hfx7ucnw/8/

旧答案

这是我知道的问题。

根据我的经验，我可以告诉您创建在 mouseover 上显示并在 mouseleave 上隐藏的“下拉菜单”或“子菜单”的唯一方法是缩进 子元素到父元素我编辑你的fiddle来告诉你我的方式。

对 CSS 和 HTML

进行一些简单的更改

http://jsfiddle.net/hfx7ucnw/5/

告诉我这条路是不是你的。

Answer 2

实际上它不会像您想象的那样工作。你给了相同的 class 菜单和子菜单 'hover' 而在 jQuery 你写了 $('.hover').hoverIntent(config);此行将在 Menu 和 Submenu 元素上初始化 hoverIntent。因此，当您使用 0 作为间隔时，一切正常，因为 HoverIntent 的 showMenu 和 hideMenu 回调都附加在这两个元素上。

所以最后，你必须自己写 code/logic 来防止 SubMenu 隐藏。

jQuery 悬停意图，当间隔大于 0 时子菜单消失/错误

jQuery Hover Intent, sub menu disappears / buggy when interval is greater than 0

javascript

jquery

html

hoverintent

编辑 - 新答案

编辑 #2 - 防止意外过度

旧答案