考虑以下导航布局
<小时/>主要导航
<小时/>辅助导航
<小时/>子导航(仅在鼠标悬停时显示) 主要或次要导航
<小时/>我需要在淡出调用中有足够长的延迟,以便用户将鼠标从主导航移动到子导航,并且一旦在子导航上,我需要取消悬停淡出。将鼠标悬停在辅助导航项上时重复这个想法。 (我知道如何添加延迟,但不知道如何取消悬停)
TIA
<div class="primary">
<ul class="primary common">
<li class="primary category" rel="politics">
<a href="#">POLITICS</a>
</li>
</ul>
</div>
<div class="secondary">
<ul class="secondary common">
<li class="secondary category" rel="news">
<a href="#">NEWS</a>
</li>
</ul>
</div>
<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
<div id="politics" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
<a href="#">POLITICS SUBNAV</a>
</li>
</ul>
</div>
<div id="news" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
<a href="#">NEWS SUBNAV</a>
</li>
</ul>
</div>
</div>
$('.category').hover(
function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeIn('slow');
}, function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeOut('slow');
});
最佳答案
尝试 jQuery Hover Intent 插件 - http://cherne.net/brian/resources/jquery.hoverIntent.html
关于javascript - jQuery - 带停止功能的延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8332327/