大家好,我正在努力完成一些事情。
我有一个用鼠标悬停显示的元素,它本质上是一个子菜单,但它的结构不像传统的子菜单那样,它不在“li”元素内。我正在尝试做的是当用户将鼠标悬停在显示子导航的“产品”上时 - 这没有问题。但是,当用户将鼠标从“产品”移动到子导航菜单本身时,我希望子菜单保持不变,直到两个元素(a#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')
}
用 JS FIDDLE 更新