鼠标移动时的悬停延迟

Posted

技术标签:

【中文标题】鼠标移动时的悬停延迟【英文标题】:Hover delay when mouse move cross 【发布时间】:2012-12-06 18:58:32 【问题描述】:

我有一个导航菜单,我希望当鼠标移动时,导航会延迟 200 毫秒。我该怎么做?

示例:http://www.amazon.com/

当鼠标在导航等待中移动时,亚马逊已经离开导航(按部门购物)。

<ul id="nav">
<li><a href="#">Menu 1</a>
    <ul>
        <li>Sub Menu 1</li>
        <li>Sub Menu 2</li>
    </ul>
</li>
<li><a href="#">Menu 2</a>
    <ul>
        <li>Sub Menu 3</li>
        <li>Sub Menu 4</li>
    </ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

例如;如果鼠标在“菜单 1”上并交叉移动到“子菜单 1”,“菜单 1”不应关闭。否则“菜单 1”应该关闭。

【问题讨论】:

请发布您拥有的 html。没有它,答案充其量只是猜测。 @RoryMcCrossan 我添加了我的问题示例代码。 【参考方案1】:

http://cherne.net/brian/resources/jquery.hoverIntent.html 是您要查找的脚本。

简单地说,它会检查你的鼠标是快还是慢。

【讨论】:

我已经在使用这个很棒的插件,但它接受每一个鼠标移动。我只想在鼠标交叉时运行。 @mrchad - 如果您使用它并且它不起作用,则意味着您配置错误 - 我已经使用了很多年并且它总是按预期工作。

以上是关于鼠标移动时的悬停延迟的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WPF 中删除鼠标悬停时的按钮发光

延迟jquery悬停事件?

为鼠标悬停添加时间延迟

鼠标悬停的棘手延迟

使用 CSS3 过渡延迟鼠标悬停/悬停

Windows 10 通过鼠标悬停延迟激活窗口?