jQuery: is mouse still over the element?

Question

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.

Solution 1

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.

Solution 2

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'));

});

Solution 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;
});

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[donut]

One thing to note, is that the onmouseover event does not fire unless the mouse is actually moving. If the user's mouse is still, but over the element, it will not be triggered. Correct me if I'm wrong, anybody.

[thedp]

Can really get the currentElementId if the element doesn't have focus? Only by moving the mouse over it?

[thedp]

It still has the same problem I have in my poor attempts: I want to be able to tell if the mouse is still there after the timeout, and if it's not over the element then do nothing.

[thedp]

You are almost 100% correct! This is why I'm asking the question. I tried to play around with 2 levels of hover and mouseover but then I noticed what you just said: The mouseover event is only fired for the top level. And unless I move the mouse out of the element and then return to it, the event doesn't fire again. So the main question here, how can I solve this annoying issue?

[PetersenDidIt]

if(mouseover) { //then do something knowing that the mouse is over the item }

[thedp]

petersendidit: I need two levels of mouseover: One before the timeout and the other after. The problem is the mouseover event is only fired once.

[dykzei eleeot]

u can set that id on ANY event, look up the use of FOCUS() here: docs.jquery.com/Events/focus

[thedp]

I love this plugin! Thank you so much.

[Nooshu]

A similar plug-in to hoverIntent is here blog.threedubmedia.com/2008/08/eventspecialhover.html, just depends exactly what you need. May be worth testing both.

[pbarney]

brilliant. you can also add a second timeout on the "unhover" function to delay the unhovering event to keep something like a slide-out menu from closing too quickly.