Question

Is it possible using jQuery to ‘time’ how long the cursor is hovering over a certain element? It would be nice if someone could put me in the right direction.

Thijs

Answer 1

I did it using jQuery’s .hover() – you can basically store the start time in the element’s .data, and compare it to Date().getTime() when the mouse leaves.

Knocked up a working fiddle here: http://jsfiddle.net/XQ9kY/1/

The HTML:

<div id="hoverZone" class="hoverable">
    You can hover over me<br />for as long as you like
</div>
<div id="hoverResult">
</div>

The jQuery:

$('.hoverable').hover(   
    function(){       
        $(this).data('inTime', new Date().getTime());
    },    
    function(){       
        var outTime = new Date().getTime();       
        var hoverTime = (outTime - $(this).data('inTime'))/1000;        
        $('#hoverResult').html('you were hovering for ' + hoverTime + 's');
    }
);