?
Solved

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

Posted on 2012-09-12
8
Medium Priority
?
2,099 Views
Last Modified: 2012-09-18
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?
0
Comment
Question by:TechStudio
  • 4
  • 3
8 Comments
 

Expert Comment

by:TrevorBasinger
ID: 38392229
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38392332
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
 

Author Comment

by:TechStudio
ID: 38393694
@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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1200 total points
ID: 38393856
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
 

Author Comment

by:TechStudio
ID: 38393869
@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
 

Author Comment

by:TechStudio
ID: 38393880
@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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38393932
Sleep ... is that an english word. Rings a bell somewhere ;)
0
 

Author Comment

by:TechStudio
ID: 38411815
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month16 days, 7 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question