父容器hover时子行变暗、子行自身hover时恢复显示，核心是利用CSS层叠与:hover优先级，通过.parent:hover > .child设opacity、.child:hover显式设opacity:1实现，推荐用opacity而非filter，注意避免hover断层与兼容性问题。
父容器 hover 时所有子行变暗，子行自身 hover 时恢复显示
核心思路是利用 CSS 的层叠关系和 :hover 选择器优先级，让子元素的 :hover 样式能覆盖父级触发的淡化效果。不能只靠父级 :hover 单向控制——那样子元素 hover 时无法“抢回”透明度。
- 父容器（如
<table>或<div class="list">）设transition控制透明度变化，避免突兀 - 子行（如
<tr>或<div class="item">）默认继承父级透明度，但必须显式声明opacity: 1在其:hover状态下 - 关键点：子元素
:hover的样式权重需 ≥ 父级:hover > *，所以推荐用.parent:hover .child:hover或直接.child:hover（后者更可靠）
用 opacity 还是 filter: opacity()？
opacity 更合适。它作用于整个元素及其子树，支持 transition，且兼容性好（IE9+）。而 filter: opacity() 虽然不影响子元素堆叠上下文，但会触发重绘、在某些浏览器中动画卡顿，且 IE 不支持。
- 别写
filter: opacity(0.3)—— 它和opacity: 0.3视觉一致，但行为不等价 - 如果子行内有绝对定位元素（如操作按钮），
opacity会让它们一起变淡；若需按钮常亮，得把按钮提级到同层或用transform+z-index绕开 - 移动端要注意：
opacity变化可能触发 iOS Safari 的渲染 bug（偶现闪烁），加transform: translateZ(0)可缓解
表格（<table>）里 <tr> hover 失效怎么办？
常见原因是父级 <tbody> 或 <table> 上设置了 opacity，而 <tr> 本身不接受 :hover（部分老浏览器或 CSS 重置库会干扰）。解决方案是换选择器目标。
- 不要写
table:hover tr { opacity: 0.5 }→ 改成table:hover tbody tr:not(:hover) { opacity: 0.5 } - 更稳妥：给每行加 class，比如
<tr class="row">，然后用.table:hover .row:not(:hover) - 如果用了 CSS-in-JS 或框架（如 Ant Design），检查是否自带
pointer-events: none或user-select: none干扰了 hover 检测
为什么鼠标移到子行边缘就闪退？
这是 hover 区域断层导致的：父级 :hover 生效范围和子行 :hover 范围之间存在微小间隙（比如 padding/margin/border 未对齐），鼠标移出父级瞬间，父级样式先撤，子行还没来得及捕获 hover，就全变暗了。
立即学习“前端免费学习笔记（深入）”；
- 检查子行是否有
margin（它不属于 hover 区域）→ 改用padding或负 margin 补齐 - 确保父容器没有
overflow: hidden切掉子行 hover 热区 - 加一点过渡延迟：
transition: opacity 0.2s ease-out, transform 0.1s，配合transform: translateZ(0)提升图层，能显著减少闪动
.list {
transition: opacity 0.2s;
}
.list:hover > .item {
opacity: 0.4;
}
.item:hover {
opacity: 1;
transition: opacity 0.15s;
}
注意 .item:hover 必须单独声明，且不能被更宽泛的选择器覆盖。父级透明度变化是“背景态”，子级 hover 是“焦点态”，二者不是互斥逻辑，而是叠加优先级关系。 
