Question

I recheck my code many times and I use something similar on another website where it is working.
Here is the link to the 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);

});

I checked with debug but does not appear to be a conflict, plus the class of hover is being applied.

Thank you!

Answer 1

The problem isn’t the plugin, it’s your CSS, you have this:

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

So when the mouse leaves that :hover isn’t being applied anymore and it’s hidden instantly by CSS, not JavaScript. To get it working you need to add li.hover as well, like this:

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

Which accounts for the element either being hovered by the mouse, or having the class .hover like you’re giving it with the hoverIntent plugin.