Question

我正在创建一个排序草稿'联系我们'页面，我想我会在CSS中使用hover属性。请参阅下面的代码。

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

我现在的问题是，当我将鼠标悬停在“电话”或“推特”上时，实际文本本身会移动。我环顾四周，人们通常会说这是因为填充，但我没有！这只是因为我想将弹出的实际文本移动到更右边，因为它弹出时太靠近其他文本了。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要在悬停时向p Tag添加绝对位置。

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

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

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

2 个答案: