为什么pageX和pageY相对于wrapper，而不是document？ [英] Why is pageX and pageY relative to wrapper, not document?

问题描述

好的，所以我想有div'.prodimg'跟随鼠标pos。这个工作，除了它被定位相对于#wrapper的左pos，它是'.details'和'.prodimg'的父div。为什么会发生这种情况？任何建议修复它或跟踪鼠标的替代方法？

'prodimg'顶部位置是相对于#wrapper顶部，然后我更改为padding-top和.prodimg已更正。这与我的问题有关，但我不能找到一个类似的解决方案左侧的位置。理想情况下，我不必改变包装器来获得pageX和pageY与整个窗口相关。

我试过'#wrapper'位置：相对和没有改变。 '.details'必须是相对的，以便它可以内联。我有jquery进入我的包装下面。 Ive尝试使用'document'代替'window'。不知道这是否与它有关...请帮助！我在这个问题上失去了近3个小时：/

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

  $（document）.ready （）{
 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）{
 $（。 css（{'top'：mouseY，'left'：mouseX}）; 
}）; 
}，
 function（）{
 $（prodimg）。 css（visibility，hidden）; 
 
}）; 
}）; 
  

并继承我的风格

  #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; 
} 
  

解决方案

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

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

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

Ok, so I want to have the the div '.prodimg' follow the mouse pos. And this works, except it's being positioned relative to the left pos of #wrapper that is a parent div of '.details' and '.prodimg'. Why is this happening? Any suggestions to fix it or alternative methods of tracking the mouse?

'.prodimg' top position was relative to the #wrapper top, then I changed it to padding-top and .prodimg was corrected. This has something to do with my problem, but I cant find a similar solution for the left position. Ideally I wouldn't have to change the wrapper to get pageX and pageY to relate to the full window.

I've tried with with the '#wrapper' position:relative and nothing changed. '.details' MUST be relative so that it can float inline. I have the jquery entered beneath my wrapper. Ive tried using 'document' in place of 'window'. Not sure if any of this has to do with it... Please help! I've lost almost 3 hours on this problem :/

here is my fiddle: 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");

   });
});

and heres my styles

#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;
}

解决方案

The top and left properties of an absolutely positioned element is relative to the element's first non statically positioned ancestor, therefore (from the code on your webpage) .prodimg will be placed relative to #wrapper

You can use a fixed position element and client co-ordinates( i.e. clientX, clientY) instead

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

这篇关于为什么pageX和pageY相对于wrapper，而不是document？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！