Javascript 在菜单项上悬停/mouseenter/mouseleave

希望实现以下功能

我有一个导航菜单，当我将鼠标悬停在“服务”链接上时，会显示一个子菜单。如果光标离开主菜单中的“服务”并悬停在子菜单上，以及光标在页面上移动，则子菜单将保持显示。当其他主菜单项之一悬停在上方时，子菜单将消失

本网站菜单示例（对链接表示歉意，我知道页面可能很快会更改，但显示为描述所需内容的最简单方式）

我正在使用WordPress

菜单结构示例

HTML

---

我没有展示任何jQuery，因为我尝试了几种不同的解决方案，不知道哪种最好展示，但是，在我将鼠标悬停在另一个菜单项上之前，它们都不会一直显示子菜单。

很简单，当鼠标悬停在另一个菜单上时，只需隐藏所有菜单，然后显示您要显示的菜单，并且不在mouseleve上添加函数。

最初

隐藏（）

您的服务div，我们可以使用jQuery

mouseover（）实现这一点

和

mouseleave（）

运行下面的代码段以查看实际操作

$（“.menu\u services”）.mouseover（函数（）{
$（'.menu\u services--hover'）.removeClass（'d-none'））
$（“.menu\u block”）.mouseover（函数（）{
$（'.menu\u services--hover'）.addClass（'d-none'））
});
});
.d-none{
显示：无；
}
@AlwaysHelping的回答很好，当鼠标离开主菜单选项时出现问题，子菜单面板没有隐藏，所以我刚刚纠正并解决了这个问题

它将检查主菜单和子菜单是否已经鼠标悬停，然后不会为
d-none
添加类


$（文档）.ready（函数（）{
$（“.menu\u services”）.mouseenter（函数（）{
$（'.menu\u services--hover'）.removeClass（'d-none'））
});
$（“.menu\uuu服务，.menu\uu服务--悬停”）.mouseleave（函数（）{
setTimeout（函数（）{
if（！$（'.menu\u服务：悬停'）.length&！$（“.menu\u服务--悬停：悬停”）.length）{
$（“.menu\u services--hover”）.addClass（'d-none'））
}
}, 100);
});
});
.d-none{
显示：无；
}

欢迎来到SO。理想的做法是在答案中提供一个有效的解决方案，而不是用陈述来解释。这样其他成员也会受益。谢谢阅读更多关于如何回答的信息：@alpha wolf gamer，但我想同时显示父菜单和子菜单。谢谢，但还不太正确。将鼠标悬停在“服务”链接上会显示子菜单，但如果我将光标直接移动到另一个菜单链接，子菜单仍会显示，当鼠标悬停在另一个菜单链接上时，子菜单应消失。此外，将鼠标悬停在子菜单上后，一旦您离开容器，子菜单就会消失，它应该一直显示，直到您将鼠标悬停在另一个父菜单链接上。@tonyd感谢您的进一步澄清-我已更新了我的答案，以符合您的期望。请让我知道。不需要使用
setTimeout
进行此操作。几乎在那里，一旦“服务”悬停并且子菜单出现，我需要它一直显示，直到菜单主分区中的另一个菜单链接悬停。类似于原始问题中的示例网站。@tonyd请查看我的更新答案。我知道你的意思。它现在的工作方式与网站完全一样。@AlwaysHelping….是的….一切都很好，按要求工作，非常感谢！谢谢，不幸的是，即使将鼠标悬停在其他父菜单项上，子菜单仍然可见。实际上，刚刚检查控制台并得到一个错误未捕获错误：语法错误，无法识别的表达式：不支持的伪：悬停您使用的是哪个Jquery版本？我想您使用的是旧Jquery版本，或者可能是浏览器问题，这就是为什么
是(“：hover”）
不工作，因此我已更新了答案检查其是否工作。jQuery ver=1.12.4和jQuery migrate.min.ver=1.4.1
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>

<div class="menu__services--hover">
<a href="/link">link</a>
<a href="/link">link</a>
<a href="/link">link</a>
<a href="/link">link</a>
</div>
</div>