Javascript CSS悬停框位置问题
目前,我正在使用以下CSS显示悬停框:Javascript CSS悬停框位置问题,javascript,css,hover,Javascript,Css,Hover,目前,我正在使用以下CSS显示悬停框: .box { width: 500px; padding: 3px; background: #404040; color: #fff; font: normal 12px Arial, Sans-serif; position: absolute; } javascript函数: function showBox(i,j){ if(i==1){
.box {
width: 500px;
padding: 3px;
background: #404040;
color: #fff;
font: normal 12px Arial, Sans-serif;
position: absolute;
}
javascript函数:
function showBox(i,j){
if(i==1){
document.getElementById("box"+j).style.display='block';
} else if(i==2) {
document.getElementById("box"+j).style.display='none';
}
}
html代码:
<div style="height:175px;overflow:auto;">
<table>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p>
<div id="box1" class="box">I'm hover box 1.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p>
<div id="box2" class="box">I'm hover box 2.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p>
<div id="box3" class="box">I'm hover box 3.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p>
<div id="box4" class="box">I'm hover box 4.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p>
<div id="box5" class="box">I'm hover box 5.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p>
<div id="box6" class="box">I'm hover box 6.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p>
<div id="box7" class="box">I'm hover box 7.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
将鼠标悬停在我身上1
我是1号悬浮框。
悬停我2
我是悬浮框2。
将鼠标悬停在我身上3
我是3号悬浮框。
将鼠标悬停在我身上4
我是四号悬浮框。
将鼠标悬停在我面前5
我是5号悬浮框。
将鼠标悬停在我面前6
我是6号悬浮框。
将鼠标悬停在我身上7
我是7号悬浮框。
如果运行此命令,您将发现当您将鼠标悬停在任何“hover ME X”文本上时,会出现一个悬停框。在您没有在div中向下滚动之前,这一切都很正常。当您在div中向下滚动时,悬停框显示在错误的位置。如何克服这个问题?这里的问题是,在您滚动页面之前,div将被定位在正确的位置,当向下滚动时,您必须记住您的页面已从默认屏幕大小扩展,因此,当定位div时,必须考虑事实>强>滚动顶部< /强>和<强>滚动左>强>,然后只有DIV正确定位。尝试在css中定义表达式或手动编写自己的函数来定位div。
这里的问题是,直到你滚动页面,div将被放置在适当的位置,并且当向下滚动时,你必须记住UR页面已经从默认屏幕大小扩展,所以当定位div时,你必须考虑事实>强>滚动顶部< /强>和<强>左滚动< /强>,那么只有您正确地定位了div。尝试在css中定义表达式或手动编写自己的函数来定位div。
希望这对您有所帮助。问题在于您对箱子的定位绝对正确:
position: absolute;
相反,尝试相对定位或固定定位
position:fixed;
问题在于您完全定位了箱子:
position: absolute;
相反,尝试相对定位或固定定位
position:fixed;
如果你使用
position: absolute;
使用负边距和正边距,可以将div放置在任何需要的地方(无需使用position:absolute以外的任何东西),边距将仅相对于代码中div放置的位置。
编码的另一个缺陷是div在您将鼠标悬停在激活它的文本上方之前就出现了(至少在我的浏览器{chrome})。为了确保在所有(或大多数)浏览器中都能正常工作,一个非常快速的修复方法是在CSS样式“框”中添加以下样式:
这将在默认情况下隐藏DIV,从而阻止它显示在页面加载中。然后,当您将鼠标悬停在文本上方时,JavaScript中的“display:block”将覆盖它,因此不会出现任何问题
我的“盒子”css样式的最终结果是:
padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;
如果你使用
position: absolute;
使用负边距和正边距,可以将div放置在任何需要的地方(无需使用position:absolute以外的任何东西),边距将仅相对于代码中div放置的位置。
编码的另一个缺陷是div在您将鼠标悬停在激活它的文本上方之前就出现了(至少在我的浏览器{chrome})。为了确保在所有(或大多数)浏览器中都能正常工作,一个非常快速的解决方法是将以下样式添加到