Capture Event hover and stay versus passing by

Is there a way t开发者_C百科o capture a mouse hover and stay (for a while) event but not if the mouse is passing by the element. So the event will be fired only when you hover and stay.

You can use setTimeout to create a delay before executing whatever code you need to, and clearTimeout to cancel the timer when the mouse leaves the element:

var timer;
$("#example").mouseover(function() {
    timer = setTimeout(function() {
       console.log("time passed");
    }, 1000); 
}).mouseout(function() {
    clearTimeout(timer);  
});

Here's a working example of the above.

Yes, a plugin exists for it. I use it in almost all of my hover code:

• jQuery HoverIntent

There is the hoverIntent plugin designed just for this.

Look into using a javascript timer, starts counting when mouse over. When the mouse leaves, stop the timer. The timer can trigger an event, if the mouse off/leave never occurs, the timer will set off your hover/stay function.

Probably JQuery pluggins for this as well.

On mouseenter a timer will start after 500ms yourFunction will be call
If the user leave before your delay, the timer will be cleared, so the function won't be called.

yourElement.live({
    mouseenter: function() {
        t=setTimeout(function(){ yourFunction() }, 500); 
    }, mouseleave: function() {
        clearTimeout(t);
    }
});

Hope this help :)