hover过渡不生效的主因是transition未写在元素默认状态规则中，且:hover可能未真正命中目标元素；需确保transition声明在非hover规则里，并用开发者工具验证实际触发区域。
hover 过渡不生效，先看 transition 是否写在非 hover 规则里
过渡动画必须定义在元素的「默认状态」（即未 hover 时）规则中，而不是只写在 :hover 里。如果只在 :hover 中写 transition，浏览器无法感知属性变化前的状态，自然不触发过渡。
常见错误写法：
button:hover {
background-color: #007bff;
transition: background-color 0.3s ease; /* ❌ 错：transition 放在 hover 里 */
}
正确写法：
button {
background-color: #6c757d;
transition: background-color 0.3s ease; /* ✅ 对：transition 在默认状态声明 */
}
button:hover {
background-color: #007bff;
}
-
transition属性本身不继承，也不在伪类中“补位”，它只作用于后续发生的属性变化 - 支持过渡的属性必须是可计算、可插值的（比如
color、opacity、transform，但display或height（从0到auto）就不行） - 若用
all 0.3s，要注意部分属性（如box-shadow的模糊半径突变）可能造成意外卡顿
检查 hover 目标元素是否真正被鼠标覆盖
看起来悬停了，但实际触发区域可能不对——尤其是当父容器有 overflow: hidden、子元素用了 transform 位移、或存在 pointer-events: none 时，:hover 根本不会匹配。
- 用浏览器开发者工具的「元素选择器」点选，确认高亮的是你期望的目标元素，而非其父/子
- 检查该元素及其所有祖先是否有
pointer-events: none（包括临时加的调试类） - 若元素通过
transform: translateY(-10px)上移，但父容器没预留空间，视觉上在上面，物理上仍处于原位置，hover 可能失效 - 使用
outline: 1px solid red临时加边框，验证真实渲染边界
初始状态和 hover 状态的属性值必须可过渡
过渡需要「起始值 → 结束值」都是明确、合法且类型一致的 CSS 值。常见断点：
- 起始值为
transparent，结束值为rgba(0,0,0,0.5)✅ 可过渡；但起始为inherit或unset❌ 多数浏览器不识别为有效过渡起点 - 字体大小从
14px→1.2em✅（都转为像素后可插值）；但从small（关键字）→16px❌ 不保证兼容 - 背景色从
#333→hsl(200, 50%, 50%)✅；但从initial→#fff❌，因为initial不是一个确定的计算值 - 避免在 hover 中突然添加
transition以外的布局属性（如margin、width），易引发重排打断过渡流
移动端没有 :hover，别依赖它做核心交互
绝大多数触摸设备（iOS Safari、Android Chrome）对 :hover 支持极弱：要么完全不触发，要么仅在点击后短暂生效一次，且不支持持续 hover 状态。如果你在真机上“hover 不动”，大概率不是 bug，而是预期行为。
- 不要用
:hover控制关键功能（比如下拉菜单展开），改用:focus-within+tabindex或 JavaScriptclick/tap显式控制 - 若需兼顾，可用
@media (hover: hover) and (pointer: fine)做特性检测，只对支持精确指针的设备启用 hover 效果 - 调试时，在 Chrome DevTools 中切换 device toolbar 并勾选 “Emulate hover”，只能模拟，不能替代真机测试
过渡失效最常卡在「transition 没写对地方」和「hover 实际没命中」这两步。把元素默认状态的 transition 补全，再用开发者工具挨个点选验证命中逻辑，90% 的问题当场就定位了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
