Question

当鼠标悬停在移动的div上时，工具提示会显示，但是div正在移动，它不会触发鼠标事件，请看问题：http://jsfiddle.net/jcezG/6/（firefox 23.0.1没问题）。 `

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

`

原谅我可怜的英语。

Answer 1

$('.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);

检查此行“$（'。area'）。css（{” - webkit-transform“：”translate（“+ offset +”px，“+ offset +”px）“，” - moz-transform“：”翻译（ “+偏移+” 像素， “+偏移+” 像素）“}）; //$('.area').css({"left":offset+'px',"top":offset+'px'}）;“这是你想要的方式吗？检查小提琴JSFiddle < / p>

Answer 2

你可以用这个

替换你的代码吗？

并在鼠标悬停时设置左侧和顶部位置

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

并设置z-index：100;在工具提示类

Demo

Answer 3

你必须使用div位置和鼠标指针位置，并在mouseenter和mousemove上激发相同的效果，以获得鼠标指针的最新位置。

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();
});

查看此fiddle了解更多详情

在移动元素上不会触发鼠标事件

3 个答案: