Why is pageX and pageY relative to wrapper, not document?

问题

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

回答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/

$(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>

回答2:

Have you looked into how offset works with jQuery? You can find more information here: http://api.jquery.com/offset/. This may help solve your problem. Is it possible to put the relevant into a jsFiddle to make it easier to help you?

jquery has some good documentation on how mouse position works: http://docs.jquery.com/Tutorials:Mouse_Position

I just found a good explanation in a similar question on here: jQuery get mouse position within an element. Hopefully that helps answer your question.

来源：https://stackoverflow.com/questions/11979784/why-is-pagex-and-pagey-relative-to-wrapper-not-document

标签

jquery

css

mouse