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的类，并且您希望为其提供工具提示的所有元素属于该类。

然后是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

2 个答案: