jQuery: is mouse still over the element?

Question

Hello,

I would like to be able to detect if the mouse is still over the element in the following scenario:

1. If mouseover then sleep for a few seconds.
2. Once done sleeping check of the mouse is still over the same element.
3. If true then do something.

How can I achieve #2?

Thank you.

Answer 1

Here's one way:

When you set .hover() on the element, you can pass 2 functions to it. The first one will fire when the mouse is over the element, the second fires when mouse moves out.

The first function can set the currentElementId (or some other flag) and the second function will clear that. This way the only thing you need to do is to check if currentElementId is blank.

Answer 2

You can use setTimeout( 'sleep', sleep_time ) to call a function after a set time.

Assign event handlers to onmouseover and onmouseout.

These handlers modify a flag to check if the mouse is still on the element.

Inside of the sleep function, you can check the flag, and just return it.

Answer 3

Just use a flag to tell you if the mouse is over it.

var mouseover = false;
$('.thing').mouseenter(function(){
    mouseover = true;
}).mouseleave(function(){
    mouseover = false;
});

Answer 4

Take a look at the hoverIntent plugin for jQuery. It gives you a new event handler which will fire only if you have been hovering over an element for a certain amount of time. By tweaking its options, you should be able to get it to do exactly what you want.

Answer 5

This seems to work (http://jsbin.com/uvoqe)

$("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {

    alert('You have been hovering this element for 1000ms');

  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});