Jquery 在鼠标位置设置 div

Question

我想在我的鼠标下始终有一个 div，这个 div 我想用来显示工具提示。

这是我正在尝试使用的代码。但是这段代码报错： “无法读取未定义的属性 'pageX'”

我的问题是为什么 pageX 未定义，我该如何解决这个问题？

$( document ).ready(function() {

    AppentMouse(); //Setup div that is used for mouse icon

    window.setInterval(function(){
        SetMouse(); //Set div that is used for mouse icon at mouse location
    }, 5);
});

function AppentMouse(){
    $( 'Body' ).append( "<div id='Mouse'>Mouse</div>");
}
function SetMouse(){
var e = window.event || e; 

    var left  = e.pageX + "px";
    var top  = e.clientY  + "px";

    var div = document.getElementById('Mouse');

    div.style.left = left;
    div.style.top = top;
}

Answer 1

考虑到这是您的 html 代码：

<body>
    <div>Your content</div>
</body>

div 有这些样式：

div {
    position: absolute;
    border: solid 1px #fc0;
}

使用 jQuery，将 mousemove 事件侦听器附加到文档，并使 div 的 top 和 left 样式在每次移动时都发生变化：

$(document).on('mousemove', function(e){
    $('div').css('top', e.pageY);
    $('div').css('left', e.pageX);
});

看到这个JSFiddle

编辑：

考虑到您的代码，变量 e 是 undefined。错误说 undefined 值没有 pageX 属性.

那是因为您需要 mouse event（针对您的情况）来定义对象 event。该对象由我们在我提供的代码中添加的 event listener 接收。

Answer 2

至于您的代码，您必须将事件绑定到 div。

一个简单的方法是不动态生成 div，只是显示和隐藏它。（如我的例子）。这也更快。

或者，每次生成 div 时，定义并从生成它的函数中触发设置鼠标事件。

提供另一种方法：

首先，HTML。在正文中的任意位置添加以下内容。

<div id="tooltip"></div>

现在 CSS（添加更多以使其看起来更漂亮）：

#tooltip {
position: absolute;
display: inline-block;
opacity: 0;
}

制作一个名为 tips 的 class 并让您希望为其提供工具提示的所有元素都属于该 class。

然后 jQuery:

//For every element in ".tips" have an attribute "tooltiptext" 
$('.tips').mouseenter(function(e) {
    $("#tooltip").css("left", e.pageX + 10);
    $("#tooltip").css("top", e.pageY+ 10);
    $("#tooltip").html($(this).attr("tooltiptext"));
    $("#tooltop").show();
});
$('.tips').mouseout(function() {
    $("#tooltip").hide();    
});

请告诉我这是否有效。

Jquery 在鼠标位置设置 div

Jquery set div at mouse position

javascript

jquery

position

tooltip

mouse