jquery - 将鼠标悬停在 div 上会中断定位 jquery css

Question

jsFiddle:http://jsfiddle.net/y78a2/

我有一个类似的元素

 <div id="hoverdiv"></div>    
 <div style="margin:0 auto;">
    <div class="hover" hovertext="This is div 1">Div 1</div>
    <div class="hover" hovertext="This is div 2">Div 2</div>
    <div class="hover" hovertext="This is div 3">Div 3</div>
</div>

css看起来像这样

#hoverdiv{
    display:none;
    position:absolute;
    font-size:12px;
    background: rgba(0,0,0,.6);
    color: #DDD;
    border: 1px solid #999;
    padding:10px;
    z-index:10000;
}

jquery 看起来像这样

 $(document).on('mousemove','.hover',function(e){   

    var hovertext = $(this).attr('hovertext');
    $('#hoverdiv').text(hovertext)
    .css('top',e.pageY-95)
    .css('left',e.pageX+10)
    .show();

 }).on('mouseout','.hover',function(){       
 $('#hoverdiv').hide();      
 });

我的问题是

1. #hoverdiv不在<div class="hover">旁边(所以我必须用户 pageY-95和 pageX+10 但这并不完美对于所有屏幕尺寸(例如，在将这些值用于 1280X720 监视器但不用于 1920X1280 监视器之后，即我必须为不同的监视器(屏幕尺寸)使用不同的值!)。我不不知道为什么会这样)
2. 主要问题是每当我缩小时<div
class="hover">改变位置(因为它有 margin:0 auto )但是 #hoverdiv保持在相同的位置，导致它不能完美地工作。

因此，我们将不胜感激。

更新删除 -95 后 fiddle 工作正常pageY来自和+10来自 pageX ...但不在我的电脑上

更新 2

     body{   
         background-color:#e7ebf2;
         font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;  
         font-size:11.5px;   
         margin:0 auto;
         line-height: 1.28;
         direction:ltr;
         color:#333;
         word-wrap:break-word;

    }
#main_body{
     width:900px;
     background-color: rgba(194,206,231,.5);
     padding:50px;
     box-shadow:0 0 5px rgba(194,206,231,1);     
     overflow:auto;  
     position:relative;
     top:110px;
     margin:0 auto;
}

内部body包含 main body其中包含这些元素...

Answer 1

问题在于 #main_body 样式抵消了您对 #hoverdiv 的绝对定位。这是一个通过向容器 div 添加 position:relative 来处理这种情况的 fiddle ，这样我们就可以使用 #main_body 的偏移量来正确定位 # hoverdiv: http://jsfiddle.net/y78a2/5/