:hover 在父元素上写子元素样式无反应，是因为必须用 .parent:hover .child 等组合选择器显式声明关系，而非仅 .parent:hover；还需排查 pointer-events、定位、高度、样式优先级等问题。
为什么 :hover 在父元素上写，子元素样式却没反应
常见错觉是只要给父容器加 :hover，里面所有子元素的样式都会自动更新——但实际生效前提是：CSS 选择器必须明确写出父子关系，且浏览器能匹配到目标元素。如果只写了 .parent:hover { color: red; }，那只会影响 .parent 自身，对 .child 完全无作用。
必须用组合选择器显式声明悬停影响路径
要让父元素悬停时改变子元素样式，得在选择器里把“悬停状态”和“目标子元素”绑在一起写。核心是使用空格分隔的后代选择器，或 > 的子选择器，确保浏览器知道“当这个父元素处于 hover 状态时，去匹配它下面的某个具体元素”。
-
.parent:hover .child：匹配.parent悬停时其任意后代中的.child -
.parent:hover > .child：只匹配直接子级的.child - 不能写成
.parent:hover, .child——这是逗号分隔的两个独立规则，.child不受 hover 控制 - 也不能依赖嵌套写法（如 SCSS 中的
&:hover { .child { ... } }），最终编译出的仍是合法的组合选择器，否则无效
容易忽略的 DOM 结构与事件冒泡干扰
即使选择器写对了，样式仍不生效，大概率是 DOM 层级或交互逻辑出了问题：
- 子元素设置了
pointer-events: none，导致父元素根本收不到 hover 事件（尤其在遮罩层、图标字体、SVG 内嵌场景中常见） - 子元素用了
position: absolute且脱离文档流，但父元素没有设position: relative，视觉上看似父子，CSS 选择器却因渲染树结构失效 - 父元素高度为
0或被overflow: hidden截断，导致鼠标实际上没真正悬停在父元素可视区域上 - 存在更具体的 CSS 规则（比如内联样式或
!important）覆盖了悬停样式，可用浏览器开发者工具检查“Computed”面板确认最终生效值
.card {
padding: 16px;
border: 1px solid #ddd;
}
.card:hover .card-title {
color: #007bff;
font-weight: bold;
}
.card:hover .card-actions {
opacity: 1;
transform: translateY(0);
}
.card-actions {
opacity: 0.6;
transform: translateY(4px);
transition: all 0.2s ease;
}
复杂点在于：悬停联动不是纯 CSS 能解决所有情况。比如子元素需要反向控制父状态（hover 子元素才高亮父边框），就得换思路——要么用 JavaScript 监听 mouseenter/mouseleave 手动切类名，要么改用 :has()（注意兼容性：Chrome 105+、Safari 15.4+ 支持，Firefox 尚未稳定）。别默认以为“写了 hover 就一定联动”，得看选择器是否真能命中、事件是否真能触发、样式是否真被应用。
立即学习“前端免费学习笔记（深入）”；
