Detect If Hovering Over Element with Jquery

Detect IF hovering over element with jQuery

Original (And Correct) Answer:

You can use is() and check for the selector :hover.

var isHovered = $('#elem').is(":hover"); // returns true or false

Example: http://jsfiddle.net/Meligy/2kyaJ/3/

(This only works when the selector matches ONE element max. See Edit 3 for more)

.

Edit 1 (June 29, 2013): (Applicable to jQuery 1.9.x only, as it works with 1.10+, see next Edit 2)

This answer was the best solution at the time the question was answered. This ':hover' selector was removed with the .hover() method removal in jQuery 1.9.x.

Interestingly a recent answer by "allicarn" shows it's possible to use :hover as CSS selector (vs. Sizzle) when you prefix it with a selector $($(this).selector + ":hover").length > 0, and it seems to work!

Also, hoverIntent plugin mentioned in a another answer looks very nice as well.

Edit 2 (September 21, 2013): .is(":hover") works

Based on another comment I have noticed that the original way I posted, .is(":hover"), actually still works in jQuery, so.

1. It worked in jQuery 1.7.x.

2. It stopped working in 1.9.1, when someone reported it to me, and we all thought it was related to jQuery removing the hover alias for event handling in that version.

3. It worked again in jQuery 1.10.1 and 2.0.2 (maybe 2.0.x), which suggests that the failure in 1.9.x was a bug or so not an intentional behaviour as we thought in the previous point.

If you want to test this in a particular jQuery version, just open the JSFidlle example at the beginning of this answer, change to the desired jQuery version and click "Run". If the colour changes on hover, it works.

.

Edit 3 (March 9, 2014): It only works when the jQuery sequence contains a single element

As shown by @Wilmer in the comments, he has a fiddle which doesn't even work against jQuery versions I and others here tested it against. When I tried to find what's special about his case I noticed that he was trying to check multiple elements at a time. This was throwing Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

So, working with his fiddle, this does NOT work:

var isHovered = !!$('#up, #down').filter(":hover").length;

While this DOES work:

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

It also works with jQuery sequences that contain a single element, like if the original selector matched only one element, or if you called .first() on the results, etc.

This is also referenced at my JavaScript + Web Dev Tips & Resources Newsletter.

Javascript or Jquery check if hovering over an element

Your problem can be written in a much neater and easier way as below

Working JSFiddle

<input class="r_check" type="checkbox" id="r1" name="rating" value="1" data-text="Low">
<input class="r_check" type="checkbox" id="r2" name="rating" value="2" data-text="Medium">
<input class="r_check" type="checkbox" id="r3" name="rating" value="3" data-text="High">

<p class="text" id="the_text"></p>

$(document).ready(function() {
  $(".r_check").each(function() {
    $(this)
      .mouseover(function() {
        $("#the_text").html($(this).attr('data-text'))
      })
      .mouseleave(function() {
        $("#the_text").html('');
      });
  })
});

Javascript detect if hover is on bottom or top padding of element

You can do something like the following, adapt to your code as needed

it takes the offset of the target element and compares that to the location of the event. If the event is in the top half of the target element it records above, else below.

$('.list-item').hover(function(e) {
  var offset = $(this).offset().top;
  var this_height = $(this).height();
  var Y = e.pageY;
  var loc = Math.abs(offset - Y);
  if (loc < this_height/2) {
    console.log('above');
  }
  else {
    console.log('below');
  }

})

How do I check if the mouse is over an element in jQuery?

Set a timeout on the mouseout to fadeout and store the return value to data in the object. Then onmouseover, cancel the timeout if there is a value in the data.

Remove the data on callback of the fadeout.

It is actually less expensive to use mouseenter/mouseleave because they do not fire for the menu when children mouseover/mouseout fire.

Check if element is hovered over in jQuery

You just need to check if hovered item has this id.

Something like this: https://jsfiddle.net/hrskgxz5/5/

 if(this.id === 'menu-item-11') {
     append = 'check out';
     alert('hovered');
 }

pure javascript to check if something has hover (without setting on mouseover/out)

Simply using element.matches(':hover') seems to work well for me, you can use a comprehensive polyfill for older browsers too: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

How to check if mouse is still over element in Javascript

Edit : I updated my previous answer with a better solution.

First, you propably have several elements with the same id and it's a bad things, so I changed to a class. Then I updated your code to simplify it and to make it more in the spirit of jQuery :

HTML :

<div class="myDiv" data-track='hover'>
test
</div>
<div class="myDiv" data-track='hover'>
test2
</div>

JavaScript :

$('.myDiv[data-track=hover]').on("mouseenter",function(){
    var $elem = $(this);
  $elem.attr("data-hover",true);
  window.setTimeout(function() {
    if ($elem.attr("data-hover")) {
        console.log('mouse is still over this element');
        console.log($elem);
    }
  }, 2000);
})

$('.myDiv[data-track=hover]').on("mouseenter",function(){
  $(this).attr("data-hover",false);
});

Here is a working jsFiddle.

---

Related Topics