:active 仅在元素被主动按下且未释放时瞬时生效，不支持过渡动画，需配合可聚焦元素（如button、a）或tabindex；移动端存在300ms延迟，:hover则仅适用于指针设备，两者不可替代:focus，且层叠顺序与组合逻辑需严格遵循规范。
点击瞬间失效？:active 必须配合鼠标事件链使用
很多开发者发现 :active 在触摸设备或快速点击后几乎“看不见”，不是 CSS 写错了，而是它只在元素被**主动按下且尚未释放**时生效，且不支持延时、过渡动画（transition 对按下状态本身无效）。它依赖底层事件触发时机，脱离用户真实交互就容易失效。
-
:active仅对可聚焦/可交互元素可靠：如<a></a>、<button></button>、<input>；<div> 默认不响应，需加 <code>tabindex="0" - 移动端需注意：iOS Safari 会延迟 300ms 触发
:active，可通过touchstart+ JS 手动加 class 替代 - 不要试图用
transition: background-color 0.2s让:active“淡入”，它只作用于状态切换的起点和终点，而按下状态本身是瞬时的 - 桌面端：
:hover在移入/移出时立即生效，但若父元素有pointer-events: none，子元素将无法捕获 hover - 无障碍影响：仅靠
:hover显示关键信息（如工具提示、下拉菜单）会导致键盘用户或屏幕阅读器不可见，必须搭配:focus或 JS 控制显隐 - 伪类层叠顺序很重要：
a:hover必须写在a:link和a:visited之后，否则会被覆盖；完整顺序应为:link → :visited → :hover → :active → :focus - 推荐结构：确保
:active样式基于:hover基础之上微调，而非完全覆盖。比如background-color: #007bff;→hover: #0056b3;→active: #004085; - 避免在
:active中修改transform: scale()同时又在:hover中设transform: translateY(-2px)，因为 transform 值会被完全替换，不是累加 - 如果需要“按住不放时保持悬停态”，纯 CSS 无法实现，必须用 JS 监听
mousedown+mouseleave+mouseup组合控制 class
:hover 不是万能悬停态，它有明确的设备与语义边界
:hover 只在指针设备（鼠标、触控板）上有意义，且浏览器不会在触摸屏上模拟 hover 效果——哪怕你用手指长按，大多数现代浏览器（Chrome Android、Safari iOS）也**不会触发 :hover**。这不是 bug，是规范行为。
组合使用 :hover 和 :active 的真实约束条件
两者可以共存，但效果叠加需满足 DOM 结构与用户动作逻辑一致。例如按钮悬停变色、点击压下变暗，看似自然，实则存在时序冲突：鼠标按下瞬间，:active 生效，但若此时指针已移出，:hover 会立刻退出，导致 :active 样式孤立出现或闪烁。
.btn {
background-color: #007bff;
transition: background-color 0.15s ease;
}
.btn:hover {
background-color: #0056b3;
}
.btn:active {
background-color: #004085;
/* 注意：这里不能加 transition，否则 active 状态会“缓出” */
}
/* 若需更稳的点击反馈，建议额外加 JS 类 */
.btn.js-pressed {
background-color: #004085 !important;
}真实项目中，最易被忽略的是：:hover 和 :active 都无法替代 focus 状态管理，尤其当用户用 Tab 键导航时，没有 :focus 样式 = 无障碍失败。别只盯着鼠标效果。
立即学习“前端免费学习笔记（深入）”；
