如何同时实现 :hover 和 :active 触发的独立 CSS 动画？

作者：袖梨 2026-08-31

CSS 中 :hover 和 :active 无法通过纯样式规则（如 :not(:active)）实现互不干扰的叠加动画，因为 :active 是瞬态伪类，释放鼠标后立即失效，且其样式优先级和生命周期会覆盖或中断 :hover 动画。必须借助 JavaScript 维持点击后的状态。

CSS 中 `:hover` 和 `:active` 无法通过纯样式规则（如 `:not(:active)`）实现互不干扰的叠加动画，因为 `:active` 是瞬态伪类，释放鼠标后立即失效，且其样式优先级和生命周期会覆盖或中断 `:hover` 动画。必须借助 JavaScript 维持点击后的状态。

在实际开发中，我们常希望一个元素既能在悬停时平滑动画（如旋转），又能在父按钮被点击后保持某种视觉状态（例如完成一次旋转并停留）。但直接使用 .box:not(:active) .el 这类写法存在根本性误解：:not(:active) 并非“取消 :active 影响”，而是仅在 .box 未处于激活态时才应用该规则；而一旦触发 :active，.box:not(:active) .el 规则即失效，此时若无其他匹配样式，.el 将回退到默认状态——这会导致 :hover 动画被意外中断，甚至完全不可见。

更关键的是：:active 伪类仅在用户按下鼠标（或触摸）的极短时间内生效（通常 < 200ms），松开即消失。它无法“记住”点击状态，因此无法与持续的 :hover 共存或接力。

正确解法：用 JavaScript 切换自定义类名，分离「交互触发」与「状态维持」逻辑：

<div class="box" id="triggerBtn"><span class="el">?</span></div>

.box {display: flex;justify-content: center;width: 100vw;height: fit-content;background-color: wheat;cursor: pointer;}.el {width: fit-content;font-size: 100px;border: solid thin pink;transition: transform 1s ease;}/* 悬停动画：独立、可中断、可重入 */.el:hover {transform: rotate(360deg);}/* 点击后保持的动画状态：由 JS 添加的类控制 */.el.clicked {transform: rotate(360deg);}/* 可选：避免悬停与点击状态冲突时的突兀跳变 */.el.clicked:hover {transform: rotate(720deg); /* 或保持原值，视设计需求而定 */}

const triggerBtn = document.getElementById('triggerBtn');const el = document.querySelector('.el');triggerBtn.addEventListener('click', () => {el.classList.add('clicked');});// 可选：支持再次点击取消状态// triggerBtn.addEventListener('click', () => {// el.classList.toggle('clicked');// });

注意事项：

不要依赖 :active 实现持久视觉反馈，它是为“按下瞬间”设计的，不是状态管理工具；
若需兼容键盘操作（如空格/回车触发），应监听 keydown 并过滤可访问性事件；
在移动端，:active 行为不稳定（尤其 Safari），JS 方案更具跨平台一致性；
如需动画链式执行（如点击 → 旋转 → 缩放），建议使用 @keyframes + animation 配合 animation-fill-mode: forwards，再由 JS 控制 animation-play-state 或切换动画类。