:active 伪类松手即失效，导致点击反馈“闪一下”；应配合 js 添加 .processing 类控制持续状态，并用 transition 实现平滑过渡，避免仅依赖 :active。
用 :active 伪类做点击反馈时，为什么松手后样式会“闪一下”或错乱？
因为 :active 只在鼠标按下（或触屏按压）期间生效，松手即失效。如果后续 JS 没有同步更新状态类（比如 .clicked 或 .disabled），而你又依赖 :active 来控制关键样式（如背景色、边框、透明度），就会出现「点下去有反馈，一松手就回弹」的视觉异常——尤其在按钮提交表单、切换格子状态等场景中，用户可能误判操作是否成功。
:active 本身不能延迟，但可以配合 class 控制持续时间
纯 CSS 没有「延时保持 :active」的能力，:active 的生命周期完全由用户交互决定。真正可控的是：用 JS 在点击时加一个 class，再用 CSS 定义该 class 的样式和过渡效果。常见组合如下：
-
:active仅用于提供「即时按压反馈」（比如缩放 0.95、背景变深） - JS 点击后立即添加
.processing类，CSS 中用.processing控制「提交中」状态（禁用指针、降低透明度、显示 loading 图标） - 用
transition给 opacity / transform 加缓动，避免突兀变化 - 请求完成后，JS 移除
.processing，让按钮自然恢复
示例 CSS：
.btn {
transition: opacity 0.2s, transform 0.15s;
}
.btn:active {
transform: scale(0.95);
}
.btn.processing {
opacity: 0.7;
pointer-events: none;
cursor: not-allowed;
}
为什么只用 pointer-events: none 会导致鼠标样式异常？
因为 pointer-events: none 会彻底剥离元素与鼠标的交互关系，浏览器不再识别它为可点击目标，所以 cursor 属性失效，默认回退到箭头光标。即使你同时写了 cursor: not-allowed，也不会生效。
解决方法只有两个：
- 放弃
pointer-events: none，改用 JS 在事件处理函数里event.preventDefault()+return，再配合cursor: not-allowed - 保留
pointer-events: none，但额外加一层透明遮罩（div.overlay）盖在按钮上，给遮罩设cursor: not-allowed，按钮本体只负责视觉
网格类游戏里重复点击同一格导致元素消失，:active 不是问题根源
这类问题本质是状态管理缺失：:active 只影响样式，不改变 DOM 结构或数据。元素消失通常是因为 JS 逻辑里写了「点击即移除」，却没判断当前格子是否已激活。
正确做法是分离「视觉反馈」和「状态切换」：
- 点击时，先查
element.classList.contains('active') - 如果是已激活格子，直接
return，不执行移除逻辑 - 用
:active做按下反馈，用.active类控制最终显示状态 - CSS 中确保
.icon.active的样式优先级高于.icon默认隐藏规则
容易被忽略的一点：如果格子是动态生成的（比如用 document.createElement），记得每次插入前清空旧的 .active 类，否则 document.querySelector('.icon.active') 可能返回 null 或错误节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
