大家好,我正在努力完成一些事情。
我有一个鼠标显示的元素,它本质上是一个子菜单,但它的结构不像传统的子菜单,因为它不在'li'元素中。我试图做的是当用户将鼠标悬停在'产品'上时,显示了subnav - 这没有问题。但是,当用户将鼠标从“产品”移动到子窗口菜单本身时,我希望子菜单保持不会消失,直到两个元素(#products和#banner-top)不再有鼠标悬停。
我目前正在使用hoverintent来实现这一目标,因为它听起来像是符合我的目的。我的印象是只要用户仍然悬停在.hoverintent附加到的其中一个元素上,就不会调用'out'。我还假设,即使用户徘徊在触发'#product-sub-nav'的初始元素上,只要他们在短时间内完成显示,'out'也不会触发。换句话说,用户将子菜单显示的“产品”悬停在“产品”上,然后用户在短时间内将鼠标悬停在子菜单上,从而不会触发将“隐藏”类附加到子窗口以再次隐藏它的功能。我希望我能够很好地解释我想要做的事情。
这是我的代码
var settings = {
sensitivity: 4,
interval: 75,
timeout: 500,
over: mousein_trigger,
out: mouseout_trigger
};
jQuery('.item-134 a, #product-sub-nav').hoverIntent(settings);
function mousein_trigger() {
jQuery('#banner-top').removeClass('hidden')
}
function mouseout_trigger() {
jQuery('#banner-top').addClass('hidden')
}
更新W / JS FIDDLE
答案 0 :(得分:1)
我只想更新此内容以防其他人遇到类似问题。此解决方案完美无缺:https://stackoverflow.com/a/1670561/1108360
jQuery(".item-134 a, #banner-top").mouseenter(function() { //if mouse is over 'products' link or submenu
//clear timeout
clearTimeout(jQuery(this).data('timeoutId'));
//display sub menu
jQuery('#banner-top').removeClass('hidden');
}).mouseleave(function() { //when mouse leaves element
timeoutId = setTimeout(function() {
//delay hiding sub menu
jQuery('#banner-top').addClass('hidden');
}, 650);
//set the timeoutId, allowing us to clear this trigger if the mouse comes back over
jQuery(".item-134 a, #banner-top").data('timeoutId', timeoutId);
});
没有正确更新JSfiddle:http://jsfiddle.net/M5BN2/5/