悬停意图不工作

Question

我重新检查我的代码很多次，我在另一个网站上使用类似的东西。 这里是链接到该网站： http://bit.ly/34XhDb

//add hover intent to dropdown 
jQuery(document).ready(function(){ 
var config = { 
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
interval: 100, // number = milliseconds for onMouseOver polling interval 
over: doOpen, // function = onMouseOver callback (REQUIRED) 
timeout: 1200, // number = milliseconds delay before onMouseOut 
out: doClose // function = onMouseOut callback (REQUIRED) 
}; 

function doOpen() { 
    jQuery(this).addClass("hover"); 
    jQuery('ul:first',this).fadeIn(); 
} 
function doClose() { 
    jQuery(this).removeClass("hover"); 
    jQuery('ul:first',this).fadeOut(); 
} 
jQuery("ul#main_catnav li").hoverIntent(config); 

}); 

我与调试检查，但并不显得冲突，再加上正在应用的类悬停的。

谢谢！

Answer 1

的问题不是该插件，这是你的CSS，你有这样的：

ul#main_catnav ul { /*...other styles... */ display: none; } 
ul#main_catnav li:hover ul { display: block} 

所以，当鼠标离开该:hover未再应用，它是由CSS，JavaScript不立即隐藏。得到它的工作，你需要添加li.hover为好，像这样：

ul#main_catnav ul { /*...other styles... */ display: none; } 
ul#main_catnav li:hover ul, ul#main_catnav li.hover ul { display: block} 

占的元素或者由鼠标悬停，或具有类.hover就像你与hoverIntent插件给它。