直接用 .parent:hover .child 即可实现父元素悬停影响子元素，空格表示后代选择器；失效主因有三：DOM结构脱离（如Portal）、子元素隐藏未恢复、CSS优先级冲突；> 仅作用于直接子元素，空格匹配所有后代；需注意移动端无hover及布局抖动风险。
父元素:hover影响子元素样式的写法
直接用 .parent:hover .child 就行，不需要 JavaScript 或额外 class。关键在空格——它表示后代选择器，不是紧邻或子代（>）。
为什么 .parent:hover .child 有时不生效
常见原因有三个：
-
.child实际不在.parent的 DOM 后代路径中（比如被teleport移走、或渲染在body下的Portal里） -
.child设置了display: none或visibility: hidden，而 hover 时没显式设回block/visible - CSS 优先级被更高权重的选择器覆盖（例如内联 style、
!important、或更长的选择器链）
用 > 还是空格？区别在哪
看你要控制的范围：
-
.parent:hover > .child：只匹配.parent的**直接子元素**，嵌套一层就失效 -
.parent:hover .child：匹配所有后代，无论几层深，但性能略低（浏览器需遍历子树） - 如果
.child是.parent的唯一目标且结构稳定，优先用>，更精准、可维护性更好
伪类触发时机与常见陷阱
:hover 是鼠标指针进入时立即触发，但要注意：
- 移动端没有 hover，
:hover在 iOS/Android 上默认不响应（除非用touchstart模拟，或加@media (hover: hover)做条件判断） - 如果
.child是通过opacity: 0隐藏，hover 时仅改opacity: 1不会触发重排，但若同时改height或display，可能造成布局抖动 - 不要在
.parent:hover .child中写transition: all，容易误带动画其他未预期属性；明确列出要过渡的属性，比如transition: opacity 0.2s, transform 0.2s
body 下，表面是父子，实际已脱离原始父容器作用域。 
