防止文字在悬停时移动
问题描述:
将鼠标悬停在容器div上时会出现跨度,但会将前一个文本推送到左侧,我该如何防止这种情况发生?防止文字在悬停时移动
包装上的高度,宽度和边框就是为了演示效果。
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
}
.element > span {
display: none;
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>
答
您可以设置position: absolute;
到span
,还添加white-space: nowrap;
到容器,防止包装需要。
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
white-space: nowrap; /* NEW */
}
.element > span {
display: none;
position: absolute; /* NEW */
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>