如何仅使用CSS实现点击元素后该元素不再受hover样式影响

核心实现思路：借助隐藏的input type="checkbox"和label标签的原生绑定关系，通过:checked伪类匹配点击后的持久状态，全程无需引入任何JS代码。

完整代码实现 #

HTML代码（移除原有的JS引入，调整结构） #

<input type="checkbox" id="btn1" class="btn-check">
<label for="btn1" class="button">123</label>

<input type="checkbox" id="btn2" class="btn-check">
<label for="btn2" class="button">123</label>

CSS代码 #

/* 隐藏checkbox，不占用页面布局 */
.btn-check {
  display: none;
}

.button {
  width: 100px;
  height: 100px;
  border: 1px solid #222;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 未点击时的hover效果 */
.button:hover {
  background-color: yellow;
}

/* 点击后（checkbox选中）的状态 */
.btn-check:checked + .button {
  background-color: red;
  pointer-events: none; /* 彻底禁用鼠标事件，hover不会再触发 */
}

扩展说明 #

• 如果需要支持再次点击恢复原状态，去掉pointer-events: none即可，checkbox原生支持切换选中/未选中状态，去掉后点击红色元素可切回初始状态，hover效果也会同步恢复
• 如果要求点击后永久保持红色不可修改，保留pointer-events: none即可

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