Question

I’m creating a drop down mega menu. The menu only appears when clicking on the navigation list item. I want it to hide on mouseout, but only after a function runs on a setTimeout of half a second. This will avoid accidental mouseouts, like if the mouse clicks on the list item, but then moves slightly out of the expanded dropped down mega menu that lives within the li.

So the basic question is, how do I use jQuery to determine if an element is currently being hovered?

If it is being hovered after half a second, I’ll keep the menu (if the user moved the mouse out, but immediately back into the li).

If after half a second, the mouse is still outside the li, then hide the menu.

Answer 1

If you simply clear the timeout using clearTimeout when you mouseenter or mouseover the menu then that will solve your problem.

Then all you have to do is reset the timeout when the next mouseout or mouseleave happens.