悬停意图/悬停延迟 jQuery.
Hoverintent/Hover Delay jQuery
嗨,我正在尝试完成一些事情。
我有一个显示一个鼠标的元素,它本质上是一个子菜单,但它的结构不像您的传统子菜单那样,因为它不在"li"元素中。我试图做的是当用户将鼠标悬停在"产品"上时,将显示子导航 - 这没有问题。但是,当用户将鼠标从"产品"移动到子导航菜单本身时,我希望子菜单保留并且不会消失,直到两个元素(a#产品和 #banner-top)不再具有鼠标悬停。
我目前正在使用悬停意图来完成此操作,因为它听起来适合我的目的。我的印象是,只要用户仍然悬停在 .hovertent 附加到的元素之一上,就不会调用"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')
}
更新带JS小提琴
http://jsfiddle.net/M5BN2/
我只是想更新它,以防其他人遇到类似的问题。此解决方案完美运行: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/
相关文章:
- css(或jQuery)悬停时淡入淡出
- jquery快速悬停问题
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- jQuery悬停在没有鼠标悬停的情况下启动
- 如何使jQuery中的悬停函数单独应用于数据库映像
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- jquery悬停和while循环
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 悬停在悬停jquery/javascript中
- 更改元素父元素的背景颜色时停止在
上闪烁鼠标悬停?jQuery/JS. - 在悬停jQuery上保持下拉列表打开
- 使用.on()关闭悬停jquery
- 如何设置属性='数据fancybox组'在滑动悬停jquery
- Wordpress不接受.悬停(jquery)
- 我如何添加文本到悬停jQuery元素
- Img SRC路径给第一个子只在悬停jquery
- 我如何跟踪一个:悬停jquery源代码
- 显示通知直到超时除非悬停(jQuery)
- 改变悬停jquery的一部分Href
- 改变背景位置的悬停- jquery