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();
});
我的问题是
#hoverdiv
不在<div class="hover">
旁边(所以我 必须用户pageY-95
和pageX+10
但这并不完美 对于所有屏幕尺寸(例如,在将这些值用于1280X720
监视器但不用于1920X1280
监视器之后,即我必须为不同的监视器(屏幕尺寸)使用不同的值!)。我不不知道为什么会这样)- 主要问题是每当我缩小时
<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
其中包含这些元素...
最佳答案
问题在于 #main_body
样式抵消了您对 #hoverdiv
的绝对定位。这是一个通过向容器 div 添加 position:relative
来处理这种情况的 fiddle ,这样我们就可以使用 #main_body
的偏移量来正确定位 # hoverdiv
: http://jsfiddle.net/y78a2/5/
关于jquery - 将鼠标悬停在 div 上会中断定位 jquery css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23225201/