html - CSS:active仅在单击期间起作用

当我点击它的时候我想保持它的黄色，当我再次点击的时候我想取消选择它的颜色。
我尝试使用:active选项。

.fave {
    width: 70px;
    height: 50px;
    background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
    background-position: 0 0;

}

.fave:hover {
    background-position: -3519px 0;
    transition: background 1s steps(55);
}

<div class="fave"></div>

最佳答案

如果您不想使用仅限js的css，可以使用checkbox来尝试此操作

[type="checkbox"]{
  display:none;
}
.fave {
    width: 70px;
    height: 50px;
    background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
    background-position: 0 0;
    display: inline-block;

}

[type="checkbox"]:checked ~ .fave {
    background-position: -3519px 0;
    transition: background 1s steps(55);
}

<input type="checkbox" id="cb1">
<label class="fave" for="cb1"></label>

关于html - CSS:active仅在单击期间起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56058965/