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插件一样。

悬停意图不起作用

1 个答案: