写页面的时候给按钮加个 hover 效果，结果鼠标移上去纹丝不动，这种体验相当挫败。hover 动画失效的原因五花八门，有些是真的没生效，有些是生效了但被别的东西盖住了。这篇文章把常见的几类原因逐一拆开分析，并配上可以直接运行的代码示例，方便对照排查。
选择器优先级与状态覆盖问题
hover 失效最常见的原因是样式被优先级更高的规则压住了。比如页面上引入了第三方组件库，组件库里写了 .btn:hover { transform: none; }，你自己写的 .btn:hover { transform: scale(1.1); } 如果选择器权重不够，就会被直接覆盖，表现出来就是 hover 没效果。
排查方法很简单，打开浏览器开发者工具，选中元素后勾选 :hover 伪类强制激活状态，再查看 Styles 面板里哪条规则生效了。如果看到自己的声明被划掉了，那就是优先级问题。修复方式有几种：提升选择器权重（比如从 .btn 改成 .box .btn）、使用 !important（不推荐滥用），或者调整样式表的引入顺序。
/* 权重不够，会被组件库覆盖 */
.btn:hover {
transform: scale(1.1);
}
/* 提升权重后的写法 */
.box .btn:hover {
transform: scale(1.1);
}
/* 开发者工具强制激活伪类的路径：
Elements 面板 -> 选中元素 -> :hov 面板 -> 勾选 :hover */
还有一种情况容易被忽略：伪类书写顺序。如果同时定义了 :link、:visited、:hover、:active，顺序不对会导致后面的规则覆盖前面的。经典的 LVHA 顺序口诀就是针对这个问题的，写错顺序时 hover 和 active 都可能失效。
animation 与 transition 的混淆使用
很多人分不清 transition 和 animation，导致写出来的代码逻辑上是错的。transition 是状态过渡，必须有属性值的变化才触发，而且只有两个状态：起始和结束。animation 则通过 keyframes 定义多个关键帧，由 animation 属性主动驱动。
一个典型的错误是想做循环动画，却把 animation 写在 hover 里，而 keyframes 里定义的属性和元素初始状态完全一样，中间又没有过渡帧，肉眼看不出任何变化：
/* 错误示例：关键帧从 opacity:1 到 opacity:1，视觉上无变化 */
.element:hover {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 1; }
to { opacity: 1; }
}
/* 正确写法：确保关键帧之间存在可见的属性差异 */
.element:hover {
animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
from { opacity: 0.2; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
另一个坑是 animation-fill-mode 没设置。默认情况下动画结束后元素会回到初始状态，如果你希望动画停在最后一帧，需要加上 forwards，否则鼠标悬停时动画播完会瞬间弹回原样，看起来像失效了一样。
此外要注意，transition 作用于伪类切换时，鼠标移出只会反向播放。而 animation 写在 hover 里，移出时会直接跳回初始状态，没有回退动画。想要移出时也有平滑过渡，应该把 transition 写在元素本身而不是 hover 状态里：
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
}
属性冲突与不可动画属性
不是所有 CSS 属性都能参与动画。像 float、display、position 这类离散属性没有中间值，transition 和 animation 对它们无效。如果 hover 时改的是 display，那不会有任何过渡效果，元素只是瞬间切换。
举个实际例子，想实现 hover 时卡片从隐藏到显示的淡入效果，直接过渡 display 是不行的：
/* 无效写法：display 不可动画 */
.tooltip { display: none; opacity: 0; }
.trigger:hover .tooltip { display: block; opacity: 1; }
/* 有效写法：用 opacity 配合 visibility（visibility 支持延迟过渡） */
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.trigger:hover .tooltip {
opacity: 1;
visibility: visible;
}
同时触发重排的属性（width、height、top、left）虽然可以动画，但性能差，在低端设备上容易掉帧，掉帧严重时动画看起来像卡死。推荐尽量使用 transform 和 opacity，这两个属性只触发合成层，由 GPU 加速处理，流畅度明显更好。
另外，如果元素的父级或自身设置了 will-change 不当，或者被某个祖先元素的 overflow: hidden 裁剪掉了变化的部分，比如放大后超出容器被裁掉，也会被误认为动画失效。检查时可以临时给元素加个红色边框确认实际边界。
其他容易被忽视的假性失效场景
有一类问题严格来说动画是生效的，只是被挡住了。最典型的是透明遮罩层：一个全屏的透明 div 盖在按钮上方，鼠标 hover 到的其实是那个遮罩，真正的事件和伪类都作用在遮罩上。排查方法是打开开发者工具，从控制台执行 document.elementFromPoint(x, y)，看看指定坐标下最顶层的元素是谁。
还有几种零散的情况也值得记录：
- 元素被设置了
pointer-events: none，鼠标事件穿透，hover 自然不触发； - 移动端设备没有真正的 hover 状态，需要用 touch 事件或媒体查询
@media (hover: hover)做适配； - 父元素触发了重建（比如 hover 父元素导致子元素被重新渲染），动画被重置从头播放；
- 使用了 CSS 变量做动画目标，但变量本身不支持插值，需要注册为
@property类型后才能平滑过渡。
总结一下排查思路：先确认伪类是否真的被触发，再看样式是否被覆盖，然后检查动画属性是否合法，最后排除遮挡和裁剪问题。按这个顺序走一遍，绝大多数 hover 动画失效的问题都能在几分钟内定位到原因。