jquery - 如何使用 jQuery 相对于鼠标指针定位 div？

Question

假设我的页面中有一个链接，我希望当我将鼠标放在该链接上时，会根据鼠标 x,y 显示一个 div。

如何使用 jQuery 完成此任务？

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; 才能淡入或显示。