根据鼠标的位置对齐框的x，y位置

Question

在我的网页中有几个图像，当鼠标访问图像时我想显示一个框（有关图像的更多信息）。我也希望盒子的位置正好在鼠标所在的位置，并随着鼠标的移动而移动。这是我的代码，但它不起作用。问题是在Firefox盒子和鼠标是垂直对齐（不是水平），但在镀铬框和鼠标水平（不是垂直）对准的

<div class="library_teaser_photo_class"> 
<div class="book_detail" style="display:block;visibility :hidden;position: fixed;"> 
<?php print $fields['field_library_writer']->content; ?> 
</div> 
<?php print $fields['field_library_photo']->content; ?> 
</div> 

，这是jQuery代码

var offsetX = 10; 
var offsetY = 20; 
$('.library_teaser_photo_class').hover(function(e) 
{ 
if (e.pageX || e.pageY) 
    { 
    posx = e.pageX; 
    posy = e.pageY; 
} 
else if (e.clientX || e.clientY)  
    { 
    posx = e.clientX + document.body.scrollLeft 
          + document.documentElement.scrollLeft; 
    posy = e.clientY + document.body.scrollTop 
          +document.documentElement.scrollTop; 
} 
    $(this).find('.book_detail').css('visibility','visible') 
           .css('top',posy + offsetY) 
        .css('left',posx + offsetX); 
},function(){ 
     $(this).find('.book_detail').css('visibility','hidden'); 
}); 

$('.library_teaser_photo_class').mousemove(function(e){ 
    if (e.pageX || e.pageY) 
      { 
      posx = e.pageX; 
      posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) 
      { 
    posx = e.clientX+document.body.scrollLeft 
          +document.documentElement.scrollLeft; 
    posy = e.clientY + document.body.scrollTop 
          +document.documentElement.scrollTop; 
} 
$(this).find('.book_detail').css('top',posy).css('left',posx); 
}); 

Answer 1

var mouseX; 
    var mouseY; 
    $(document).mousemove(function(e) { 
     mouseX = e.pageX; 
     mouseY = e.pageY; 
    }); 
    $('.library_teaser_photo_class').mouseover(function(){ 
     $(this).find('.book_detail').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); 
    }); 


the function above will make the DIV appear over the link wherever that may be on the page. It will fade in slowly when the link is hovered. You could also use .hover() instead. From there the DIV will stay, so if you would like the DIV to disappear when the mouse moves away, then, 

    $('.library_teaser_photo_class').mouseout(function(){ 
    $(this).find('.book_detail').fadeOut('slow'); 
    }); 

If you DIV is already positioned, you can simply use 

    $('.library_teaser_photo_class').hover(function(){ 
     $(this).find('.book_detail').fadeIn('slow'); 
    }); 

另外，请记住，您的DIV样式需要设置为display:none;才能淡入或显示。