Question

我有一个网站，当您悬停时，导航中的最后一项将切换隐藏的div。我正在尝试创造各种各样的“超级导航”。我遇到的问题是让div隐藏鼠标。以下是我的代码示例。

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

当用户将鼠标悬停在“地点”上时，我希望显示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');

我面临的问题是当用户mousesout该空间时，将#locationsSuperNav隐藏起来。 div为475px宽，140px高。这是我为mouseout事件尝试的代码。当光标进入div时，正在发生的是div切换。

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

有人建议如何在mouseout上隐藏div？

感谢。

Answer 1

“......当用户mousesout那个空间时，正在隐藏#locationsSuperNav ......”。目前尚不清楚：哪个空间被淘汰了？ Locations链接，还是#locationsSuperNav div？

你现在设置鼠标悬停的方式，它会在你进入鼠标时隐藏SuperNav。你想让它只在鼠标移出SuperNav时隐藏吗？然后将.mouseover()更改为.mouseout()。

如果您希望在鼠标移开Locations链接时隐藏它，请在那里附加mouseout事件。

Answer 2

使用.hover（）...它需要两个函数，只需http://api.jquery.com/hover/一个函数用于鼠标，另一个函数用于mouseout。

切换隐藏的div然后隐藏鼠标

2 个答案: