自定义喜欢按钮的喜欢状态不起作用

Question

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

尽管在我的博客上看起来正确且可用，但它没有显示文章中描述的喜欢状态。

我的博客：https://14test.tumblr.com

代码如下： HTML

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

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

Answer 1

您需要更改此：

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

对此：

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

问题是当前选择器的 css 正在尝试使用 Adjacent Sibling Combinator 但这不起作用，因为你的标记嵌套在另一个元素内。

此外，您的标记中有一个

<div class="like_button"></div>

块，但 Tumblr 在

{LikeButton}

内生成相同的选择器/类名，我认为这会导致绑定到单击事件的问题。

我在浏览器中测试了它并使其正常工作，但您需要更新它以确保它适合您。