Question

我有一个大的<div />容器，它有一个图像作为背景。当用户将光标移到该元素上时，我需要显示另一个有信息的<div />。我希望第二个相对于光标的位置。

这是我有多远，我不知道如何将它完全适合鼠标指针：http://jsfiddle.net/cyX2m/

更新：问题是位置，而不是事件。

提前谢谢！

Answer 1

首先，您只需将事件从mouseover更改为mousemove即可。然后你需要从PageX / Y中减去触发事件的元素的位置：

$("#big-area").bind("mousemove", function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    $("#data").html('e.pageY: ' + y + ', e.pageX: ' + x);

    $("#helper").css('top', y).css('left', x).show();
});

Updated fiddle

Answer 2

我会从父position:relative中移除div，以便根据页面的body定位弹出窗口。然后它将完全跟随光标位置。

http://jsfiddle.net/cyX2m/2/

根据jQuery </div>中光标的相对位置，将一个顶部/左侧的框放在<div>中

2 个答案: