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

也许你必须调整你的代码

鼠标坐标无法正常工作，

2 个答案: