Question

I have certain div in the page and I need to do this:

When the user mouse stands on the div for 2 seconds without moving out, then an alert will show

I came here because I don’t really know where to start, what to do, how to make it.

I searched on the web but I got no results. Any tutorial, resources, guide or example would be great.

Answer 1

When hovering over the element, use setTimeout to request an alert box, with a delay of 2000 milliseconds (2 seconds). Reset the timer using clearTimeout and setTimeout when the user moves the mouse.

Example, Fiddle: http://jsfiddle.net/6SyLb/1/

var div = document.getElementById("thediv");
function alerter(){
    alert("Test")
    timer = setTimeout(alerter, 2000);
}
var timer;
div.onmousemove = function(){
    clearTimeout(timer);
    timer = setTimeout(alerter, 2000)
};
div.onmouseover= function(){
    clearTimeout(timer);
    timer = setTimeout(alerter, 2000)
}
div.onmouseout = function(){
    clearTimeout(timer);
};