html - 当我在CSS中使用hover属性时，我的普通文本会移动

我正在创建一个排序草案'联系我们'页面，我想我会玩在CSS中的悬停属性。请看下面的代码。

.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
  border: 4px;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  margin: 20px;
  border: 1px solid black;
  display: inline-block;
}

<p>Test</p>
<div id="contact" class="info">
  <ul>
    <li>
      <div id="phone" class="hoverinfo">Telephone
        <p>Number</p>
      </div>
    </li>
    <li>
      <div id="twitter" class="hoverinfo">Twitter
        <p>Twitter URL</p>
      </div>
    </li>
  </ul>
</div>

我现在的问题是，当我在“电话”或“推特”上停留时，实际的文本本身就会移动。我环顾四周，人们通常说是因为填充物，但我没有！这只是因为我想把弹出的文本移到右边，因为当它弹出的时候，它离另一个文本太近了。

最佳答案

在可见/悬停的display:inline;项上使用<p>可以使用以下解决方案：

.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  border: 1px solid black;
  margin:20px;
  display: inline;
}

<p>Test</p>
<div id="contact" class="info">
  <ul>
    <li>
      <div id="phone" class="hoverinfo">Telephone
        <p>Number</p>
      </div>
    </li>
    <li>
      <div id="twitter" class="hoverinfo">Twitter
        <p>Twitter URL</p>
      </div>
    </li>
  </ul>
</div>

关于html - 当我在CSS中使用hover属性时，我的普通文本会移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41468298/