防止文字在懸停時移動

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>