jquery - 切换隐藏的 div，然后在鼠标移开时隐藏

Question

我有一个网站，当您将鼠标悬停在导航中的最后一项时，将切换隐藏的 div。我正在尝试创建某种“ super 导航”。我遇到的问题是让 div 在鼠标移出时隐藏。这是我的代码示例。

<ul id="nav_14623">
    <li>
        <a href="/index.htm">Home</a>
    </li>
    <li class="locations">
        <a href="/locations.htm">Locations</a>  
    </li>
</ul>

当用户将鼠标悬停在“Locations”上时，我希望显示 div“locationsSuperNav”。

<div id="locationsSuperNav" style="display: none;"> Location Content goes here
<div id="superNavLeft"></div>

这是jquery

$('li#locations a').hover(function () {
    $('#locationsSuperNav').toggle('medium');

我面临的问题是当用户将鼠标移出该空间时隐藏#locationsSuperNav。 div 宽 475 像素，高 140 像素。这是我为 mouseout 事件尝试的代码。当光标进入 div 时，div 会立即切换。

$('#locationsSuperNav').mouseout(function () {
    $('#locationsSuperNav').hide();

有人对如何在鼠标移开时隐藏 div 有建议吗？

谢谢。

Answer 1

“...当用户将鼠标移出该空间时，#locationsSuperNav 将隐藏...”。这还不清楚:哪个空间被鼠标移出了？位置链接，还是#locationsSuperNav div？

按照您现在设置的鼠标悬停方式，当您将鼠标移入 SuperNav 时，它会隐藏 SuperNav。您是否希望它仅在您将鼠标移出 SuperNav 时才隐藏？然后将 .mouseover() 更改为 .mouseout()。

如果您希望它在鼠标移出“位置”链接时隐藏，请在此处附加 mouseout 事件。