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

Question

好吧，所以我想要div'.prodimg'按照鼠标pos。这是有效的，除了它被定位在#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"); 

    }); 
}); 

和我的继承人风格

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="details"> 
 
     <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a> 
 
    <div class="prodimg"></div> 
 
    </div> 
 
    <div class="details"> 
 
     <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a> 
 
    <div class="prodimg"></div> 
 
    </div> 
 
     <div class="details"> 
 
     <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a> 
 
    <div class="prodimg"></div> 
 
    </div> 
 
</div>

Answer 2

你看着怎么offset工作与jQuery？你可以在这里找到更多的信息：http://api.jquery.com/offset/。这可能有助于解决您的问题。是否有可能将相关内容放入jsFiddle中以使其更容易帮助您？

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

我刚刚发现一个类似的问题一个很好的解释在这里：jQuery get mouse position within an element。希望这有助于回答你的问题。绝对定位的元素的