如何使用jQuery定位相对于鼠标指针的div？
假设我在页面中有一个链接，并且当我将鼠标放在链接上时，div将根据鼠标x，y显示在那里。
我怎样才能完成这个使用jQuery？
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'); }); 上面的函数将使DIV出现在页面上可能存在的链接上。 当链接hover时，它将慢慢地淡入。 你也可以使用.hover（）来代替。 从那里DIV将会保留下来，所以如果你想在鼠标移开的时候DIV消失的话，
$(".classForHoverEffect").mouseout(function(){ $('#DivToShow').fadeOut('slow'); });
如果你的DIV已经定位好了，你可以简单的使用
$('.classForHoverEffect').hover(function(){ $('#DivToShow').fadeIn('slow'); });
另外，请记住，您的DIV风格需要设置为display:none; 为了它淡入或展示。
有很多使用JQuery来检索鼠标坐标的例子，但没有解决我的问题。
我的网页的正文宽度为1000像素，我将它居中在用户的浏览器窗口中间。
body { position:absolute; width:1000px; left: 50%; margin-left:-500px; }
现在，在我的JavaScript代码中，当用户在我的页面上右键单击时，我想要一个div出现在鼠标位置。
问题是，只使用e.pageX值是不太正确的。 如果我调整我的浏览器窗口大约1000像素宽，它会工作得很好。 然后，popup窗口会出现在正确的位置。
但是，如果将浏览器窗口的大小增加到1200像素宽度，那么div会在用户点击的位置右侧显示大约100像素 。
解决方法是将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; }); })
唷。 这花了我一段时间来解决！ 我希望这对其他开发者有用！
你不需要创build一个$(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'); });
<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>
