如何转换点赞按钮状态（点赞 -> 点赞）

Question

我使用了本文中的以下代码这里

我目前正在寻找如何在有人喜欢我的帖子后转换喜欢的文本（喜欢 -> 喜欢）。 我的博客：https://14test.tumblr.com

CSS

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.like_button:hover + .our_button {
  color: red;
}
.like_button.liked + .our_button {
  background: white;
  color: red;
}

HTML

<center>
   <div class="custom-like-button">
   {LikeButton}
       <span class="our_button">
          &hearts;
       </span>
   </div>
</center>

Answer 1

您可以使用 pseudo before or after css 选择器相对轻松地实现此目的。

我会这样做：

.like_button + .our_button:after {
   content: "LIKE"
}

.like_button .liked + .our_button:after {
  content: "LIKED"
}

您可以将任何内容添加到

content

字段中，但这会将内容附加到 our_button 包装器中，因此您可能想要删除心形，并且容器内没有任何现有的 HTML 内容。 IE只是在css后面使用pseudo来控制文本。

<span class="our_button"></span>

HTH