Hover Intent ne fonctionne pas

Question

Je revérifie mon code plusieurs fois et j'utilise quelque chose de similaire sur un autre site où il fonctionne. Voici le lien vers le site: 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); 

}); 

J'ai vérifié avec le débogage, mais ne semble pas être un conflit, ainsi que la classe de vol stationnaire est appliquée.

Merci!

Answer 1

Le problème n'est pas le plug-in, c'est votre CSS, vous avez ceci:

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

Ainsi, lorsque la souris quitte cette :hover ne soit appliqué plus et il est caché instantanément par CSS, pas JavaScript. Pour le faire, vous avez besoin d'ajouter de travail li.hover ainsi, comme ceci:

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

qui représente l'élément soit plané par la étant souris, ou ayant la classe .hover comme vous donnez avec le plug-in hoverIntent.