Question

is there any way to detect how many seconds a mouse pointer stays on an html element?

I would like to retrieve how many seconds a mouse stays over element to put a little delay on a callback event… if is possible 🙂

i’m trying with a simple for() cycle detecting by a counter :

var time_over ; 
$('.bean-active').live('mouseover',function(){  
  id_tag = $(this).attr("id");   
  for(time_over = 1;time_over <= 3000;time_over ++){
      if(time_over == 3000){
         $('.bean-bubble,.bean-bubble img').hide();   
         $('#bean-bubble-'+id_tag+',#bean-bubble-'+id_tag+' img').show();
      }  
  }   
});

the problem is that it doesn’t works 🙁

also i would like to bind a mouseleave event, script logic should be:

while ( mouseover element count how many time it stays over) 
  if (time == n)
  { do somenthing } 
if (mouseleave from element earlier then time)
{ do somenthing different }

Answer 1

You should be able to utilize the hover() function to capture when the mouse goes over a particular element and then react as desired when the mouse is removed from that object.

$("#someDiv").hover(function(){ 
    //start counter
}, function(){
    //stop counter
});