マウス座標が正常に動作しない

Question

次のページでは、画像の横に表示されるはずのポップアップが表示されます。ウィンドウのサイズによっては、ポップアップがマウスの近く/近くに表示されます。私はコードに何が間違っているのか分からないので、ポップアップはマウスの近くに表示されません。

http://www.hughgrice.com/test/

jQuery(document).mousemove(function (e) { 

    mouseX = e.pageX; 
    mouseY = e.pageY; 

    follow(); 
}); 

function follow(){ 
    d = document.getElementById("thumbTT"); 
    if(openToolTip){ 
     d.style.display = "block"; 
     d.style.left = mouseX+5 + "px"; 
     d.style.top = mouseY-100 + "px"; 
    }else{ 
     d.style.display = "none"; 
    } 
} 

http://www.hughgrice.com/test/

Answer 1

これは動作するはずです：

var $elem = $('#thumbTT'); 

$(document).on('mousemove', function (e) { 
    follow(e.pageX, e.pageY); 
}); 

function follow (x, y) {   
    if(openToolTip) { 
     $elem.css({ left: x + 5, top: y - 100 }).show(); 
    } else { 
     $elem.hide(); 
    } 
} 

私は#thumbTT要素が静的であると仮定しているので、私は事前にそれへの参照をキャッシュしています。

Answer 2

あなたのwrapperはDIVが相対的な位置にあるため、正しく配置されていません。あなたのラッパーのdivからposition:relativeを削除する必要があります。また、あなたのmousemove function

よう

jQuery(document).mousemove(function (e) { 
    var offset = jQuery(this).css('offset'); 

      mouseX = offset.left; 
      mouseY = offset.top; 
      follow(); 
     }); 

を記述する必要があります多分あなたはだからあなたのコード