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

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?
TechStudioAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Ok - not sure I understand why you are doing it that way but why not test first if the element exists

  $('.sub-item').length > 0 ...

Open in new window

0
 
TrevorBasingerCommented:
I think you're wanting this: http://api.jquery.com/mouseenter/

Edit:
I misunderstood the question.

Actually, I noticed a flaw in your code. You didn't close the if statement on line 6 of your example. It seemed to work fine after I fixed that. Here's the corrected version:
$('a').hover(
  function() {
    $(this).addClass('hover');
  },
  function() {
    if ( $('.sub-item').is(':hover') ){
        return false;
    }
    $(this).removeClass('hover');
  }
);

Open in new window

0
 
Julian HansenCommented:
What are you trying to achieve? It does not make sense what you are doing.

I think this will solve your problem as described but can't be certain without knowing more about what you are trying to do - obviously this is a code snippet from a larger code source so this might not be what you want. Best I can do on the information provided
$('a').hover(
  function() {
    $(this).addClass('hover');
  },
  function() {
    if ( $(this).hasClass('.sub-item')) {
        return false;
    }
    $(this).removeClass('hover');
  }
);

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
TechStudioAuthor Commented:
@TrevorBasinger

I fixed that missing close on CodePen and it does work. That's true to the real site. This method works fine. The problem is that when this method is run on an element which doesn't exist, an error is reported. The error doesn't seem to cause any problems, but it's an error in the console nonetheless.

@julianH

The code you posted back unfortunately does nothing for the problem, but that is merely a result of not understanding what I'm trying to do. I'll explain two different things.

The simplest explanation of the problem.

When the method .is(':hover') is run on a selector which doesn't correspond to any existing elements, the following error appears in the console even though it actually functions properly.

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover

My reason for using this method along with the problem explained.

I am building a layout which has top-level menu items that are part of one <nav> element and child items which are part of another <nav> element. This is a change that is made in the DOM after the original semantic HTML is loaded. These elements are separate due to the way the design is structured. When the mouse enters one of the top-level menu items, it may then leave. If it leaves and goes into one of the 'child' menu items, the hover class should not be removed from the parent menu item. This is where the .is(':hover') menu item is used, and it works perfectly. The mouse may leave the menu item without hovering a child, that's fine too. If the mouse hovers a menu item which has no child element, then the .is(':hover') is run for a selector which does not exist. This is when the error appears in the console.

... keep in mind that the whole layout works perfectly, I'm just trying to solve the problem of seeing this error in the console.
0
 
TechStudioAuthor Commented:
@julianH

I'm not sure if I understand anything anymore. I am going to see if I can make your suggestion work. At one point I actually already tried that exact thing, but I'm going to give it another shot.

The reason I'm doing this is because z-index has limitations. I'm working on this example which will completely show the method, but I haven't finished. Take a look.
http://codepen.io/ryanburnette/pen/GiHba

You'll notice that the menu is underneath an element containing a kitten. The drop-downs from that menu which is under the kitten will need to be on top of the kitten. The way I decided to do it was to remove the sub-menus from their original nav element with jQuery then place then in a newly created element with its own z-index.
0
 
TechStudioAuthor Commented:
@julianH

That solution proved to be effective. As I said, I had tried this before but I was slightly sleep deprived at the time and I did not implement it properly. By checking to make sure the element exists before using the .is(':hover') method on it I avoid having any errors in the console log.

I'm sure we'll all be too busy to care by the time this site launches or I take the time to finish the reduced set example on CodePen, but if I remember I'll update this question with that example so it's documented for any others who have this problem.
0
 
Julian HansenCommented:
Sleep ... is that an english word. Rings a bell somewhere ;)
0
 
TechStudioAuthor Commented:
Update:

.is(':hover') doesn't work in Firefox at the current time.

The solution I ended up using involved setting timers to hide elements then destroying the timers if the elements should stay visible.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.