如何使用 jQuery 相对于鼠标指针定位 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4666367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I position a div relative to the mouse pointer using jQuery?
提问by Thomas
Suppose I have one link in my page and I want that when I place my mouse just over the link, a div will show there according to mouse x,y.
假设我的页面中有一个链接，并且我希望当我将鼠标放在链接上时，会根据鼠标 x,y 显示一个 div。
How can I accomplish this using jQuery?
如何使用 jQuery 完成此操作？
回答by mcbeav
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".classForHoverEffect").mouseover(function(){
$('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});
the function above will make the DIV appear over the link wherever that may be on the page. It will fade in slowly when the link is hovered. You could also use .hover() instead. From there the DIV will stay, so if you would like the DIV to disappear when the mouse moves away, then,
上面的函数将使 DIV 出现在页面上任何可能的链接上。当链接悬停时，它会慢慢淡入。您也可以使用 .hover() 代替。从那里 DIV 将保留，所以如果您希望 DIV 在鼠标移开时消失，那么，
$(".classForHoverEffect").mouseout(function(){
$('#DivToShow').fadeOut('slow');
});
If you DIV is already positioned, you can simply use
如果你的 DIV 已经定位，你可以简单地使用
$('.classForHoverEffect').hover(function(){
$('#DivToShow').fadeIn('slow');
});
Also, keep in mind, your DIV style needs to be set to display:none;in order for it to fadeIn or show.
另外，请记住，您的 DIV 样式需要设置display:none;为淡入或显示。
回答by Mike Gledhill
There are plenty of examples of using JQuery to retrieve the mouse coordinates, but none fixed my issue.
有很多使用 JQuery 检索鼠标坐标的示例，但没有一个解决了我的问题。
The Body of my webpage is 1000 pixels wide, and I centre it in the middle of the user's browser window.
我的网页的正文宽 1000 像素，我将它放在用户浏览器窗口的中间。
body {
position:absolute;
width:1000px;
left: 50%;
margin-left:-500px;
}
Now, in my JavaScript code, when the user right-clicked on my page, I wanted a div to appear at the mouse position.
现在，在我的 JavaScript 代码中，当用户右键单击我的页面时，我希望在鼠标位置出现一个 div。
Problem is, just using e.pageXvalue wasn't quite right. It'd work fine if I resized my browser window to be about 1000 pixels wide. Then, the pop div wouldappear at the correct position.
问题是，仅使用e.pageX值不太正确。如果我将浏览器窗口的大小调整为大约 1000 像素宽，它会正常工作。然后，pop div会出现在正确的位置。
But if increased the size of my browser window to, say, 1200 pixels wide, then the div would appear about 100 pixels to the rightof where the user had clicked.
但是，如果将我的浏览器窗口的大小增加到 1200 像素宽，那么 div 将出现在用户单击位置右侧约100 像素处。
The solution is to combine e.pageXwith the bounding rectangle of the body element. When the user changes the size of their browser window, the "left" value of body element changes, and we need to take this into account:
解决方案是将e.pageX与 body 元素的边界矩形组合。当用户更改浏览器窗口的大小时，body 元素的“ left”值会发生变化，我们需要考虑到这一点：
// Temporary variables to hold the mouse x and y position
var tempX = 0;
var tempY = 0;
jQuery(document).ready(function () {
$(document).mousemove(function (e) {
var bodyOffsets = document.body.getBoundingClientRect();
tempX = e.pageX - bodyOffsets.left;
tempY = e.pageY;
});
})
Phew. That took me a while to fix ! I hope this is useful to other developers !
呼。这花了我一段时间来修复！我希望这对其他开发人员有用！
回答by Shaji Kurian
You don not need to create a $(document).mousemove( function(e) {})to handle mouse x,y. Get the event in the $.hoverfunction and from there it is possible to get x and y positions of the mouse. See the code below:
您不需要创建一个$(document).mousemove( function(e) {})来处理鼠标 x,y。在$.hover函数中获取事件，然后可以从那里获取鼠标的 x 和 y 位置。请参阅下面的代码：
$('foo').hover(function(e){
var pos = [e.pageX-150,e.pageY];
$('foo1').dialog( "option", "position", pos );
$('foo1').dialog('open');
},function(){
$('foo1').dialog('close');
});
回答by Prosenjit Bhaumik
<script type="text/javascript" language="JavaScript">
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;
function UpdateCursorPosition(e) {
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e) {
cX = event.clientX;
cY = event.clientY;
}
if (document.all) {
document.onmousemove = UpdateCursorPositionDocAll;
} else {
document.onmousemove = UpdateCursorPosition;
}
function AssignPosition(d) {
if (self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
} else if (document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if (document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX + 10) + "px";
d.style.top = (cY + 10) + "px";
}
function HideContent(d) {
if (d.length < 1) {
return;
}
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if (d.length < 1) {
return;
}
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if (d.length < 1) {
return;
}
var dd = document.getElementById(d);
AssignPosition(dd);
if (dd.style.display == "none") {
dd.style.display = "block";
} else {
dd.style.display = "none";
}
}
//-->
</script>
<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">
[show on mouseover, hide on mouseout]
</a>
<div id="uniquename3" style="display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;">
Content goes here.
</div>
