使用CSS在悬停时更改文本

Question

我有这个标记和CSS

<div class="share-btn">
  20 Shares
  <span>Share Now</span>
</div>

CSS

.share-btn span{
  display: none;
}
.share-btn:hover {
  display: none;
}

.share-btn:hover span {
  display: block;
}

我正在尝试更改鼠标悬停时的文字。悬停20 Shares应更改为Share Now。我尝试使用CSS，但没有像我预期的那样工作。

如何使用CSS执行此操作？

谢谢！

Answer 1

试试这个：

<div class="share-btn">
  <span id="one">20 Shares</span>
  <span id="two">Share Now</span>
</div>

CSS

 .share-btn #two{
      display: none;
    }

    .share-btn:hover #one {
      display: none;
    }

    .share-btn:hover #two {
      display: block
    }