当您将鼠标悬停在父元素上时,我将此框显示为提示框。在表格单元格外实现相同的代码没有问题,但在表格单元格中,整行会在悬停文本时重新调整大小,因为新文本已添加到行中。
我怎样才能避免这种情况?
HTML:
<table border="1" cellspacing="0px" class="dtable">
<tr id="th">
<td>Name</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td class="hoverbox">Some text<span>Hidden text</span></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
CSS:
# CSS for the table
.dtable {
margin: 0px auto;
border:1px solid #ccc;
border-collapse: collapse;
text-align: center;
border-color: black;
font-weight: bold;
width: 100%;
}
.dtable tr:nth-child(odd){background-color:#303030}
.dtable tr:nth-child(even){background-color:#333333}
.dtable #th {
background-color: #000;
font-family: eurostile;
}
.dtable td {
padding: 15px 0px;
font-family: eurostile;
}
# CSS for the hidden text
.hoverbox span {
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display: none;
#padding:0 20px;
}
.hoverbox span:after {
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.hoverbox:hover span {
display:block;
}
这是一个fiddle
提前致谢。
最佳答案
试试这个片段
.dtable {
margin: 0px auto;
border:1px solid #ccc;
border-collapse: collapse;
text-align: center;
border-color: black;
font-weight: bold;
width: 100%;
}
.dtable tr:nth-child(odd){background-color:#303030}
.dtable tr:nth-child(even){background-color:#333333}
.dtable #th {
background-color: #000;
font-family: eurostile;
}
.dtable td {
padding: 15px 0px;
font-family: eurostile;
}
.hoverbox span {
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display: none;
#padding:0 20px;
}
.hoverbox span:after {
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.hoverbox:hover span {
display:block;
position:absolute;
z-index: 9;
top: 0;
left: 50%;
}
<table border="1" cellspacing="0px" class="dtable">
<tr id="th">
<td>Name</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td class="hoverbox">Some text<span>Hidden text</span></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
您必须将绝对位置添加到 span 本身,而不是添加到 .hoverbox span:after
,如下所示:
.hoverbox:hover span {
display:block;
position:absolute;
top: 0;
left: 50%;
}
关于html - 显示隐藏文本时如何防止表格行重新调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35290274/