防止文字在悬停时移动

Question

将鼠标悬停在容器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>

Answer 1

您可以设置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>