在移动元素上不要触发鼠标事件答案

【问题标题】：on a moving element don't fire the mouse events在移动元素上不要触发鼠标事件
【发布时间】：2013-09-05 06:33:54
【问题描述】：

当鼠标悬停在移动的 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);

请原谅我糟糕的英语。

【问题讨论】：

标签： jquery html tooltip mouseleave

【解决方案1】：

你能用这个替换你的代码吗

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

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

【讨论】：

【解决方案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);

勾选这一行 "$('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)","-moz-transform":" translate("+offset+"px,"+offset+"px)"}); //$('.area').css({"left":offset+'px',"top":offset+'px'});" 是你想要的吗？检查小提琴JSFiddle

【讨论】：

如果您在 moz 浏览器中使用 css3，则必须使用单词“-moz-”。 Firefox 是 -moz- 浏览器。这就是为什么它不适用于Firefox。如果您使用的是 css3 IE，则使用单词“-ms-”。
哦，对不起。我的意思是，当您的鼠标在 .area 上并且不移动鼠标（您的手可以离开）时，.area 仍然会移动，直到静态鼠标移出它，但是此时，mouseleave 事件不会触发,tooltip还在显示,我想让tooltip这个时候消失
哎呀，但是当鼠标跟随.area时，工具提示会在5s后消失
我猜这是一个错误，但只有 Firefox 实现了它

【解决方案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了解更多详情

【讨论】：

是的，谢谢，但我仍然认为这是一个浏览器错误。浏览器应该处理它，而不是我
现在有什么问题。
其实div的移动是随机的