CODEWITHSUNDEEP
jqueryhover
Ben
Ben

Reputation: 3025

Using jQuery, how do I tell if an element is currently being "hovered"

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.

Upvotes: 1

Views: 701

Answers (3)

Coin_op
Coin_op

Reputation: 10708

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.

Upvotes: 2

RoToRa
RoToRa

Reputation: 38390

jQueryReferenceToElement.is(':hover')

Upvotes: 0

Xyan Ewing
Xyan Ewing

Reputation: 912

The only way I've found to do this is using the plugin hoverIntent:

http://cherne.net/brian/resources/jquery.hoverIntent.html

Upvotes: 1

Related Questions