テキストがホバリングで移動しないようにする

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

あなたは、必要に応じてラッピングを防ぐために、コンテナにwhite-space: nowrap;を追加するも、spanにposition: absolute;を設定することができます。

#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>