Question

在我的网站上europebathroom.com我有一个横向主菜单。当我将鼠标悬停在其中一个菜单项上时，会出现一个下拉列表。当我将鼠标悬停在另一个菜单项上时，该菜单项的下拉菜单会出现，当然应该如此。

但是，当您不小心快速触摸另一个菜单项时，我不希望发生这种情况。

我希望它像以下链接中的水平菜单：badkamerwinkel.nl。

因此，在悬停时，下拉列表的更改应延迟几毫秒，以避免在您意外触摸另一个菜单项时出现烦人的情况。有没有我可以用来做这个的脚本？我还不是很有经验，道歉。

非常感谢你，请知道这是我在这个伟大的支持网站上的第一篇文章，所以欢迎任何批评和提示让我的下一篇文章更好！

麦克

修改菜单的工作方式与下面的菜单大致相同。

<ul class="main">
    <li class="item1">
        <div class="submenu1">...</div>
    </li>
    <li class="item2">
        <div class="submenu2">...</div>
    </li>
    <li class="item3">
        <div class="submenu3">...</div>
    </li>
</ul>

.submenu1{
    display:none;
}

.main .item1:hover .submenu1{
    display:block;
}

.submenu2{
    display:none;
}

.main .item2:hover .submenu2{
    display:block;
}

因此，如果你悬停item1，则子菜单1显示，如果你悬停item2，子菜单2会立即显示。有没有办法将此动作延迟几毫秒？谢谢！

Answer 1

您可以使用JQuery hoverIntent插件来延迟动画。我用它来创造一种类似的行为。

查看here

将鼠标悬停在主菜单上时，下拉菜单会发生延迟

1 个答案: