CSS :active仅在点击期间生效，如何实现星星点击变黄再点击还原效果

你说得对，:active伪类确实只能在点击按住的瞬间生效，松开鼠标就会恢复原样，没法实现你要的持久切换状态效果。要实现点击保留黄色、再次点击还原的功能，我们需要结合CSS类和JavaScript来控制状态，或者用纯CSS的checkbox hack方案，下面分别给你两种实现方式：

方案一：JavaScript + CSS 类切换（推荐，更灵活） #

这个方案逻辑清晰，后续扩展功能也方便：

1. 调整CSS样式 #

我们新增一个.active类来标记星星激活（黄色）的状态，同时调整hover动画的逻辑，避免激活状态下的hover冲突：

.fave {
  width: 70px;
  height: 50px;
  background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
  cursor: pointer; /* 加上鼠标指针，提示可点击 */
}

/* hover时播放动画到黄色状态 */
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

/* 激活状态：固定在黄色帧，取消hover动画 */
.fave.active {
  background-position: -3519px 0;
  transition: none; /* 避免切换状态时的过渡 */
}

/* 激活状态下hover保持黄色，不需要动画 */
.fave.active:hover {
  background-position: -3519px 0;
}

2. 添加JavaScript切换逻辑 #

给星星元素绑定点击事件，用classList.toggle()来切换激活类：

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

<script>
  const faveIcon = document.querySelector('.fave');
  faveIcon.addEventListener('click', function() {
    this.classList.toggle('active');
  });
</script>

方案二：纯CSS Checkbox Hack（无需JS） #

如果不想用JavaScript，可以利用隐藏的checkbox的:checked伪类来控制状态，适合简单场景：

<!-- 隐藏的checkbox，用来记录状态 -->
<input type="checkbox" id="faveToggle" style="display: none;">

<!-- 用label关联checkbox，点击label相当于点击checkbox -->
<label for="faveToggle" class="fave"></label>

<style>
.fave {
  width: 70px;
  height: 50px;
  background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  display: inline-block; /* label默认是行内元素，需要设为行内块 */
}

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

/* 当checkbox被选中时，对应的label切换到黄色状态 */
#faveToggle:checked + .fave {
  background-position: -3519px 0;
  transition: none;
}

#faveToggle:checked + .fave:hover {
  background-position: -3519px 0;
}
</style>

为什么:active不行？ #

再补充一下原因：:active是CSS的动态伪类，它只在用户按下鼠标按钮（或触摸屏幕）的时间段内生效，一旦松开鼠标，这个伪类的样式就会立即消失，所以没法实现你要的“点击后保持状态”的需求。只有通过添加持久的类（或利用表单元素的状态），才能记录用户的点击选择。

内容的提问来源于stack exchange，提问作者Mercer