On A Moving Element Don't Fire The Mouse Events

a tooltip will show when mouse over a moving div, but ,the div is moving,it doesn't fire the mouse events,see the problem: http://jsfiddle.net/jcezG/6/ (firefox 23.0.1 is ok). ` $

Solution 1:

can you please replace your code with this

and set left and top postion at time of mouseover

$('.area').on('mouseenter',function(){
     $('.tooltip').show();
}).on('mousemove', function(e){
     $('.tooltip').css({'top':e.pageY,'left':e.pageX});
}).on('mouseleave',function(){
     $('.tooltip').hide();
});

and set z-index:100; in tooltip class

Demo

Solution 2:

$('.area').on('mouseenter',function(){
    $('.tooltip').show();
}).on('mousemove', function(e){
   $('.tooltip').css({'top':e.pageY,'left':e.pageX, 'z-index':'1'});
}).on('mouseleave',function(){
    $('.tooltip').hide();
});

var offset = 10;
setInterval(function(){
    //$('.area').hide();
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":"translate("+offset+"px,"+offset+"px)"});
    //$('.area').css({"left":offset+'px',"top":offset+'px'});
    offset += 10;
},1000);

Check this line "$('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":"translate("+offset+"px,"+offset+"px)"}); //$('.area').css({"left":offset+'px',"top":offset+'px'});" Is that the way you want ? check the fiddle JSFiddle

Solution 3:

you have to use the div position as well as mouse pointer position and fire same effect on mouseenter and mousemove to get the latest position of mouse pointer.

var x,y;

$('.area').on('mouseenter mousemove',function(e){
    //console.log(e.pageX + "|" + e.pageY);
    x= e.pageX;
    y=e.pageY;
    $('.tooltip').css({'top':e.pageY,'left':e.pageX + 15, 'z-index':'1'}).show();
}).on('mouseleave',function(){
    $('.tooltip').hide();
});

Check this fiddle for more detail