为什么pageX和pageY相对于包装器而不是文件？

好的，所以我希望div’.prodimg’跟随鼠标位置。 这是有效的，除了它相对于#wrapper的左边位置，它是’.details’和’.prodimg’的父div。 为什么会这样？ 任何修复它的建议或跟踪鼠标的替代方法？

‘.prodimg’顶部位置相对于#wrapper顶部，然后我将其更改为padding-top并更正.prodimg。 这与我的问题有关，但我找不到左侧位置的类似解决方案。 理想情况下，我不必更改包装器以使pageX和pageY与完整窗口相关。

我已尝试使用’#wrapper’位置：相对且没有任何改变。 ‘.details’必须是相对的，以便它可以浮动内联。 我把jquery输入到我的包装器下面。 我尝试使用’文档’代替’窗口’。 不确定是否与此有任何关系……请帮忙！ 我在这个问题上已经失去了近3个小时：/

这是我的小提琴： http ： //jsfiddle.net/vg2zL/

$(document).ready(function() { var mouseX; var mouseY; $(window).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".details").hover( function () { $(this).children(".prodimg").css("visibility","visible"); $(window).bind('mousemove', function(e){ $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX}); }); }, function () { $(".prodimg").css("visibility","hidden"); }); }); 

并且inheritance了我的风格

 #wrapper { width: 700px; padding-top: 130px; position: absolute; left:50%; margin-left: -351px; font-size: 30px; font-family: 'cmu_serifroman'; } .details { text-align:center; width:200px; display:inline-block; line-height:40px; margin-right:50px; cursor:pointer; } .prodimg { visibility:hidden; position:absolute; z-index:-1; } 

Answer 1

绝对定位元素的top和left属性是相对于元素的第一个非静态定位的祖先，因此（来自您网页上的代码） .prodimg将相对于#wrapper放置

您可以使用固定位置元素和客户端坐标（即clientX ，clientY）

http://jsfiddle.net/vg2zL/1/

 $(document).ready(function() { var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.clientX; mouseY = e.clientY; }); $(".details").hover( function () { $(this).children(".prodimg").css("visibility","visible"); $(document).bind('mousemove', function(e){ $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX}); }); }, function () { $(".prodimg").css("visibility","hidden"); }); }); 

 #wrapper { width: 280px; padding-top: 130px; position: absolute; left:50%; margin-left: -141px; font-size: 10px; font-family: 'cmu_serifroman'; } .details { text-align:center; width:60px; display:inline-block; margin-right:20px; cursor:pointer; } .prodimg { visibility:hidden; position:fixed; z-index:-1; background-color:blue; width:50px; height:50px; } 

  
 
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
 
 
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
 
 
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
 
  

Answer 2

你有没有研究过offset如何与jQuery一起工作？ 您可以在此处找到更多信息： http ： //api.jquery.com/offset/ 。 这可能有助于解决您的问题。 是否可以将相关内容放入jsFiddle中以便更容易地帮助您？

jquery有一些关于鼠标位置如何工作的好文档： http ： //docs.jquery.com/Tutorials : Mouse_Position

我刚刚在这里的类似问题中找到了一个很好的解释： jQuery在一个元素中获得鼠标位置 。 希望这有助于回答您的问题。