html - 悬停时居中文本

Question

我在文本悬停方面遇到了问题。当我将文本悬停在右侧时，它会强制悬停在左侧并产生故障效果。

有没有办法让悬停居中？

HTML

<div class="adress">
  <p class="copy"><span>Text Text Text</span></p>
</div>

CSS

p {
  float: left; /* Important */
}

.copy {
    cursor: pointer;
    text-align: center;
}

.adress:hover p.copy span {
    display: none;
}

.adress:hover p.copy:after {
    content: 'Copy';
    color: #fff;
    background: #80bdf7;
    border-radius: 3px;
    font-size: 12px;
    padding: 4px;
}

演示 - https://jsfiddle.net/rtzksobr/

Answer 1

我不确定您为什么将 float: left 指定为不删除且重要。这就是造成它的原因。如果你真的需要 float: left，那么这样做:

p {
  float: left; /* Important */
  text-align: center;
  width: 100%;
}

有效的

片段。

p {
  float: left;
  text-align: center;
  width: 100%;
}
.copy {
  cursor: pointer;
  text-align: center;
}
.adress:hover p.copy span {
  display: none;
}
.adress:hover p.copy:after {
  content: 'Copy';
  color: #fff;
  background: #80bdf7;
  border-radius: 3px;
  font-size: 12px;
  padding: 4px;
}

<div class="adress">
  <p class="copy"><span>Text Text Text</span>
  </p>
</div>