单击后如何更改心形按钮的颜色？

由 发布于 cssjavascripthtml
 收藏

在下面的代码中如何看到我使用了伪元素，实际上这就是为什么我感到困惑的原因。知道点击按钮后如何更改颜色吗？

.heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}
<div class="wrapper">
    <a class="heart" href="#"></a>
</div>

如果您知道有关CSS绘图和动画的一些不错的教程，我将感谢您的链接。我已经使用过w3schools和freecodecamp。 感谢您的时间和答复！

评论
  • svelit
    svelit 回复

    如果只是单击它，则可以使用活动状态（请参见下面的示例代码）：

        .heart:active, .heart:active:before, .heart:active:after {
        background-color: black;
    }

    如果要在元素处于焦点状态时更改颜色，请处于焦点状态：

        .heart:focus, .heart:focus:before, .heart:focus:after {
        background-color: black;
    }


    

    

    .heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

.heart:active, .heart:active:before, .heart:active:after {
    background-color: black;
}
    

    <div class="wrapper">
    <a class="heart" href="#"></a>
</div>