마우스의 위치에 따라 상자의 x, y 위치를 맞추면

Question

내 웹 페이지에 몇 개의 이미지가 있고 마우스를 이미지를 방문 할 때 상자 (이미지에 대한 추가 정보)를 표시하려고합니다. 또한 상자 위치가 마우스가있는 위치와 정확히 일치해야 마우스 움직임과 함께 움직여야합니다. 이것은 내 코드이지만 작동하지 않습니다. 문제는 파이어 폭스에서 상자와 마우스가 수직으로 정렬 (수평이 아닌)하지만 크롬 박스와 마우스에 수평 (수직이 아닌)

<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;으로 설정해야합니다.