如何使用jQuery将一个div相对于鼠标指针定位？

Question

假设我的页面中有一个链接，当我将鼠标悬停在链接上时，希望根据鼠标的 x,y 坐标在那里显示一个 div。使用 jQuery，我该如何实现这个功能？

- Thomas

---

https://dev59.com/K2_Xa4cB1Zd3GeqP5dbyhttp://stackoverflow.com/questions/15635270/weird-behaviour-of-drop-down-menu-created-by-jquery - Thomas

Answer 1

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() 代替。从那里开始，DIV 将保持显示状态。因此，如果您希望鼠标移开时 DIV 消失，则

$(".classForHoverEffect").mouseout(function(){
  $('#DivToShow').fadeOut('slow');
});

如果你的 DIV 已经定位好了，你可以简单地使用

$('.classForHoverEffect').hover(function(){
  $('#DivToShow').fadeIn('slow');
});

还要记住，你的 DIV 样式需要设置为 display:none; 才能淡入或显示。

- mcbeav

---

k，有点搞砸了，不太确定你想要实现什么，但是你可以使用第一个函数mousemove获取鼠标的坐标，它会将其存储在变量mouseX和mouseY中，然后你可以从这些变量中加减你想要实现的距离，如果有意义的话。 - mcbeav

当然，如果您需要任何具体的说明或更多帮助，请在评论区留言。 - mcbeav

请确保将#DivToShow的位置设置为“绝对定位”。 - patrick

最好使用 mouseenter 和 mouseleave。 - Derek 朕會功夫

直接在mouseover函数中使用pageX和pageY怎么样？ - Gaunt

以下代码在固定位置显示div，但与鼠标指针位置不匹配。<div class="flyout hidden"> </div> $(document).ready(function () { $('#tblGrid').on('mouseover', 'a', function (e) { var mouseX = e.pageX; var mouseY = e.pageY; $(".flyout").append($(this).attr('title')); $('.flyout').css({ 'top': mouseY, 'left': mouseX }).fadeIn('slow'); });$('#tblGrid').on('mouseout', 'a', function (e) { $(".flyout").empty(); $('.flyout').hide(); });}); - undefined

Answer 2

有很多用jQuery获取鼠标坐标的例子，但没有一个能解决我的问题。

我的网页主体宽度为1000像素，并在用户浏览器窗口中央居中显示。

body {
    position:absolute;
    width:1000px;
    left: 50%;
    margin-left:-500px;
}

现在，在我的JavaScript代码中，当用户右键单击我的页面时，我希望一个div出现在鼠标位置。

问题是，仅使用e.pageX值并不完全正确。如果我将浏览器窗口大小调整为大约1000像素宽度，那么它会正常工作。然后，弹出的div 会出现在正确的位置。

但是，如果将浏览器窗口大小增加到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;
    });
}) 

哎呀，这花了我一段时间才修好！希望这对其他开发人员有所帮助！

- Mike Gledhill

---

这是……尝试做完全相同的事情，但我遇到了麻烦。谢谢！+1 - william44isme

为了纠正类似于 top: 50%; margin-top: 500px; 的垂直偏移，还需使用 tempY = e.pageY - bodyOffsets.bottom;。但是如果body上没有top或margin-top属性，则无法起作用。 - Dan Dascalescu

Answer 3

您不需要创建一个$(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');
});

- Shaji Kurian

Answer 4

<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>

- Prosenjit Bhaumik