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。希望這有助於回答你的問題。絕對定位的元素的