防止文本在悬停时移动

Question

当鼠标悬停在容器div上时会出现跨度，但它会将前一个文本推到左侧，我该如何阻止？

包装器上的高度，宽度和边框就是为了展示效果。

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将position: absolute;设置为span，同时将white-space: nowrap;添加到容器中以防止根据需要进行换行。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;