CSS如何实现鼠标移入高亮当前行并淡化其他行_在父级hover时降低所有子级透明度，在子级hover时恢复-css教程-PHP中文网

父容器hover时子行变暗、子行自身hover时恢复显示，核心是利用css层叠与:hover优先级，通过.parent:hover > .child设opacity、.child:hover显式设opacity:1实现，推荐用opacity而非filter，注意避免hover断层与兼容性问题。

css如何实现鼠标移入高亮当前行并淡化其他行_在父级hover时降低所有子级透明度，在子级hover时恢复

核心思路是利用 CSS 的层叠关系和 :hover 选择器优先级，让子元素的 :hover 样式能覆盖父级触发的淡化效果。不能只靠父级 :hover 单向控制——那样子元素 hover 时无法“抢回”透明度。

父容器（如 <table> 或 <code><div class="list">）设 <code>transition 控制透明度变化，避免突兀
子行（如 <tr> 或 <code><div class="item">）默认继承父级透明度，但必须显式声明 <code>opacity: 1 在其 :hover 状态下
关键点：子元素 :hover 的样式权重需 ≥ 父级 :hover > *，所以推荐用 .parent:hover .child:hover 或直接 .child:hover（后者更可靠）

opacity 更合适。它作用于整个元素及其子树，支持 transition，且兼容性好（IE9+）。而 filter: opacity() 虽然不影响子元素堆叠上下文，但会触发重绘、在某些浏览器中动画卡顿，且 IE 不支持。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别写 filter: opacity(0.3) —— 它和 opacity: 0.3 视觉一致，但行为不等价
如果子行内有绝对定位元素（如操作按钮），opacity 会让它们一起变淡；若需按钮常亮，得把按钮提级到同层或用 transform + z-index 绕开
移动端要注意：opacity 变化可能触发 iOS Safari 的渲染 bug（偶现闪烁），加 transform: translateZ(0) 可缓解

表格（

<table>）里 <code><tr> hover 失效怎么办？
<p>常见原因是父级 <code><tbody> 或 <code><table> 上设置了 <code>opacity

，而 <tr> 本身不接受 <code>:hover（部分老浏览器或 CSS 重置库会干扰）。解决方案是换选择器目标。

不要写 table:hover tr { opacity: 0.5 } → 改成 table:hover tbody tr:not(:hover) { opacity: 0.5 }
更稳妥：给每行加 class，比如 <tr class="row">，然后用 <code>.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

CSS如何实现鼠标移入高亮当前行并淡化其他行_在父级hover时降低所有子级透明度，在子级hover时恢复