CSS hover动画不触发最常见的原因是transition未写在元素默认状态而写在:hover中；必须将transition置于初始样式，且确保过渡属性可动画、元素可交互并排除遮挡等问题。
CSS hover 动画不触发，最常见的原因是 transition 属性没写在元素的默认（初始）状态上，而是只写在 :hover 伪类里。浏览器需要在初始状态就“知道”哪些属性要过渡、用什么时长和缓动函数，才能在 hover 时平滑变化。
transition 必须写在默认样式中
错误写法（动画不会触发）：
.box {
width: 100px;
height: 100px;
background: #3498db;
}
.box:hover {
width: 200px;
transition: width 0.3s ease; /* ❌ 错！transition 在 hover 里无效 */
}正确写法（动画正常触发）：
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: width 0.3s ease; /* ✅ 对！transition 写在默认状态 */
}
.box:hover {
width: 200px;
}检查是否遗漏可动画的 CSS 属性
不是所有 CSS 属性都支持 transition。确保你正在过渡的属性是 可动画的，例如：
立即学习“前端免费学习笔记（深入）”；
- 数值型属性：width、height、opacity、transform、color、background-color、margin、padding 等
- 非数值或不可动画属性：display、visibility、z-index、position（本身）、content 等 —— 这些加了 transition 也无效
比如想用 display: none → block 实现淡入？不行。应改用 opacity + visibility 组合，并配以 transition。
确认 hover 目标存在且可交互
以下情况会导致 hover 根本不生效，进而让动画“看起来不触发”：
- 元素被其他元素遮挡（z-index 过低或父级 overflow: hidden 裁剪）
- 元素透明度为 0 或 background 完全透明，但没有设置
pointer-events: none，此时仍可能响应 hover；若设置了pointer-events: none，则完全不响应 - 父容器有
pointer-events: none，子元素即使写了 hover 也收不到事件 - 使用了
will-change: transform等优化属性，但未正确触发硬件加速上下文（极少影响，但偶发）
补充建议：调试小技巧
快速验证 transition 是否生效：
- 打开浏览器开发者工具 → 选中元素 → 在 Styles 面板中查看 “Computed” 标签页，搜索
transition，确认是否解析成功 - 临时给 hover 状态加个明显变化（如
background: red），排除“动了但看不出”的问题 - 用
transform: scale(1.1)替代宽高变化，性能更好且更可靠
