Hover Intent funktioniert nicht

Question

Ich überprüfe meinen Code viele Male und ich verwende etwas ähnliches auf einer anderen Website, wo es funktioniert. Hier ist der Link zu der Website: 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); 

}); 

ich mit Debug-geprüft, aber scheint nicht zu einem Konflikt zu sein, und die Klasse der Hover angewendet wird.

Vielen Dank!

Answer 1

Das Problem ist nicht das Plugin, ist es Ihre CSS ist, haben Sie dies:

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

Also, wenn die Maus lässt, dass :hover wird nicht mehr angewendet werden, und es ist sofort von CSS versteckt, nicht JavaScript. Um es zu bekommen arbeiten müssen Sie li.hover auch hinzuzufügen, wie folgt aus:

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

, die für das Element Konten entweder durch die Maus schwebte, oder mit der Klasse .hover wie Sie es mit dem hoverIntent Plugin geben.