How can jQuery be used to detect whether an element is hovered?

[ryanburnette]

I need to detect whether an element is hovered using jQuery. The .hover() method is not going to do what I need.

I created this reduced set to show the problem. If you remove lines 6-8 of the JS the code does its basic function, but I need something to replace .is(‘:hover’). On actual sites the code does work, but it throws an error when the method acts on a selector that doesn’t exist.
http://codepen.io/ryanburnette/pen/dumgi

Any ideas?

[JoeShmoe]

I’m confused, in your test case you’re looking if .is(‘:hover’) AFTER you hover out.

http://codepen.io/anon/pen/nCEGI

See comments on the JS

[ryanburnette]

I just typed a novel of a response and somehow lost it when I clicked Post Comment. Ugh.

[ryanburnette]

The issue at hand is with the .is(‘:hover’) method. The example doesn’t make sense on its own, so don’t worry about how no one would ever build something like that.

On the real site there are menu drop downs which aren’t part of the same element as the parent menu. When the mouse pointer leaves the main menu item and travels into the drop down area, I detect that the mouse left the main item for the drop down rather than just leaving to go somewhere else. That’s where I’m using the is.(‘:hover’) method. It actually works fine everywhere I’ve tested it. It does, however, throw errors every time the method runs on an element which does not exist.

The goal of the example was to find a suitable replacement or fix for the .is(‘:hover’) method.

[ryanburnette]

Update:

It wasn’t working at all in CodePen just because I forgot to close the IF statement.
http://codepen.io/ryanburnette/pen/dumgi

Now it works in CodePen. I do, however, assert that if you put this code into a browser and use it, if the .sub-item element does not exist in the DOM, you’ll get an error every time it runs.

[ryanburnette]

I found a solution to the problem.

It’s fine to use .is(‘:hover’), but it throws an error if you use this method on an element that doesn’t exist. If you’re going to use it, just make sure to test before you do. Here is an example.

`if ( $(‘.element’).length > 0 ) {
if ( $(‘.element’).is(‘:hover’) {
// do something
}
}`

[ryanburnette]

Update:

After all that … .is(‘:hover’) doesn’t work in Firefox.

I ended up completely rewriting my script. I’m literally too busy to properly document this whole process, but at some point I’ll have to come back and do it because I feel bad for anyone who has to go through all this over again.

On mouseenter, I display the additional elements. When mouseleave fires, a timer starts that will hide the additional elements. If within 50 milliseconds or so, the mouse enters that element or the drop-down again, the timer is removed. This might sound ridiculous, but it’s the only method I could find that works in all browsers.

[Author]

Posts