2

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

`

原谅我糟糕的英语。

4

3 回答 3

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

于 2013-09-05T06:50:20.583 回答
0

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

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

$('.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; 在工具提示类中

演示

于 2013-09-05T06:55:12.553 回答
0

您必须使用 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();
});

检查此小提琴以获取更多详细信息

于 2013-09-05T07:39:50.630 回答