悬停中心文字

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>

Answer 2

尝试清除浮动，然后使div成为一个全宽的块以适合页面。这将允许您使用text-align将div放在页面中心。如果要在放置跨度文本的位置中间复制，可以使宽度为跨度文本的大小，这可以通过使跨度和p具有相同的宽度来实现。

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

.copy {
    cursor: pointer;
    text-align: center;
}
        
.adress:hover p.copy span {
    display: none;
}

.adress:hover p {
  clear: left;
  display:block;
  width: 100%;
  text-align:center;

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