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 に答える