transition 必须写在子元素常态规则中，且父元素 hover 时子元素属性值必须发生可过渡的真实变化。常见错误包括：属性不可过渡（如 display）、变化量为0、选择器未命中或优先级被覆盖。
transition 写在子元素但 hover 父元素时没反应
直接写 transition 在子元素上，却指望父元素 :hover 触发它的动画，这是常见误解。CSS transition 只响应**自身属性的变更**，不响应父级伪类切换——哪怕子元素在父级 :hover 下被显式设置了新样式，也必须确保该样式是「可过渡的」且「实际发生了计算值变化」。
- 检查是否遗漏了要过渡的属性：比如只写了
transition: all 0.3s;，但子元素初始状态和.parent:hover .child中设置的值完全相同（例如都是opacity: 1），那就不会触发过渡 - 确认目标属性确实支持过渡：像
display、height（从0到auto）这类不可过渡的属性，即使写了transition也无效 - 避免用
visibility+transition想实现淡入——visibility本身不可过渡，得改用opacity配合pointer-events控制交互
正确写法：把 transition 放在子元素，同时确保 hover 时它有明确的属性变更
关键不是“写在哪”，而是“变没变”。下面这个例子中，子元素默认透明、缩放为 0.9，父级 hover 时显式设为不透明、缩放 1 —— 这些属性都支持过渡，且发生了真实变化：
.parent {
position: relative;
}
.child {
opacity: 0;
transform: scale(0.9);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.parent:hover .child {
opacity: 1;
transform: scale(1);
}
注意：transition 必须写在子元素的**常态规则里**（即非 :hover 块中），否则浏览器无法提前建立过渡上下文。
调试技巧：用 DevTools 强制触发并观察 computed 值
Chrome / Firefox 的开发者工具里，右键子元素 → “Force state” → 勾选 :hover，再看右侧 Computed 面板中 opacity、transform 等值是否真的变了。如果没变，说明你的选择器没命中，或 CSS 优先级被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被更具体的选择器覆盖（比如
.child.active覆盖了.parent:hover .child） - 确认子元素没有
!important锁死初始值，导致 hover 设置无效 - 某些框架（如 Vue 的 scoped style）会自动加属性选择器，可能让
.parent:hover .child失效，需用::v-deep或/deep/（依 Vue 版本）穿透
transition-delay 和 timing-function 容易被忽略的细节
即使过渡生效，也可能因延迟或缓动函数导致“看起来没动”。比如：
-
transition-delay: 1s写在子元素上，但你只 hover 了 0.5 秒就移开了，那根本看不到动画 -
transition-timing-function: steps(4)会让 opacity 变化变成突变式，误以为没过渡 - 多个属性过渡时，若只给部分属性设了
delay或duration，容易出现错拍（比如 transform 动完了 opacity 才开始）
建议初期统一用 transition: all 0.3s ease; 排查，确认能动之后再拆分控制。
最常卡住的地方其实是：你以为子元素“应该动”，但它压根没收到新样式；或者收到了，但那个样式不可过渡、或变化量为 0。盯着 DevTools 的 Computed 面板看两眼，比反复改 CSS 有效得多。
