Question

我有像

这样的元素

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

我的问题是那个

#hoverdiv不在<div class="hover">旁边（因此我必须是用户pageY-95和pageX+10 ，但这并不完美适用于所有屏幕尺寸（例如，在1280X720显示器旁边使用这些值后，但1920X1280显示器中没有，即我必须为不同的显示器（屏幕尺寸）使用不同的值！） .i不知道为什么会这样？）
主要问题是每当我缩小 <div class="hover">更改位置时（因为它有margin:0 auto）但是 #hoverdiv仍处于同一位置，导致其无法正常工作。

因此，我们将不胜感激。

更新从-95移除pageY +10后，小提琴正常工作...但不在我的电脑上

UPDATE2

pageX

     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，其中包含这些元素......

Answer 1

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

将鼠标悬停在div中以定位jquery css

1 个答案: