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
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.
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.