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

前端之家收集整理的这篇文章主要介绍了如何使用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()。从那里DIV将留下,所以如果你想要DIV消失时,鼠标移开,然后,

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

如果你DIV已经定位,你可以简单使用

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

另外,请记住,您的DIV样式需要设置为display:none;为了它淡入或显示

猜你在找的jQuery相关文章