Question

I was wondering if there is a function to be run after an element (e.g. div class=”myiv”) is hovered and check every X milliseconds if it’s still hovered, and if it is, run another function.

EDIT: This did the trick for me:
http://jsfiddle.net/z8yaB/

Answer 1

For most purposes in simple interfaces, you may use jquery’s hover function and simply store in a boolean somewhere if the mouse is hover. And then you may use a simple setInterval loop to check every ms this state. You yet could see in the first comment this answer in the linked duplicate (edit : and now in the other answers here).

But there are cases, especially when you have objects moving “between” the mouse and your object when hover generate false alarms.

For those cases, I made this function that checks if an event is really hover an element when jquery calls my handler :

var bubbling = {};
bubbling.eventIsOver = function(event, o) {
if ((!o) || o==null) return false;
var pos = o.offset();
var ex = event.pageX;
var ey = event.pageY;
if (
    ex>=pos.left
    && ex<=pos.left+o.width()
    && ey>=pos.top
    && ey<=pos.top+o.height()
) {
    return true;
}
return false;
};

I use this function to check that the mouse really leaved when I received the mouseout event :

 $('body').delegate(' myselector ', 'mouseenter', function(event) {
    bubbling.bubbleTarget = $(this);

    // store somewhere that the mouse is in the object

}).live('mouseout', function(event) {
    if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;

    // store somewhere that the mouse leaved the object

});