tbody tr:hover 不生效的根本原因是 HTML 缺失显式 tbody 或浏览器环境不匹配；需显式书写 tbody、避免 pointer-events: none、移动端改用 touch 事件模拟、td/tr:hover 语义不同、transition 仅限 background-color、补全 background-color: inherit。

tbody tr:hover 为什么总不生效

根本原因不是 CSS 写错了，而是 HTML 结构没写对或浏览器环境不匹配。浏览器会自动补全 tbody，但 CSS 选择器 tbody tr:hover 只匹配你显式写出的 tbody 元素下的 tr——动态框架（如 React 的 Fragment、Vue 的模板根节点）若没包裹 tbody，它就根本不存在。

常见失效点：

• table 直接包含 tr，没写 <tbody> —— 必须显式写出 <li>父容器设了 <code>pointer-events: none，整个 hover 被拦截
• td 或 th 有独立背景色（比如 background: white !important），盖掉了 tr:hover 的背景
• 移动端默认不触发 :hover，iOS/Android 上点一下可能闪一下就没了

如何让高亮稳定出现在触屏设备上

别依赖 :hover 做关键反馈。移动端没有悬停概念，mouseover/mouseout 在大多数手机浏览器里基本不触发。

可靠做法是用 JS 模拟：

立即学习“前端免费学习笔记（深入）”；


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 监听 touchstart，给当前 tr 加临时类名如 is-touched
• 在 touchend 中加 setTimeout(..., 150) 再移除，防止点击按钮时高亮残留
• 配合 @media (hover: hover) 条件启用纯 CSS 方案，避免触屏设备浪费渲染
• 确保目标行可聚焦（加 tabindex="0"），兼顾键盘用户

td:hover 和 tr:hover 的行为差异很关键

它们不是“换种写法”，而是完全不同的交互语义：

• td:hover 是点哪亮哪，适合查看明细（比如悬停单元格显示 tooltip）
• tr:hover 是扫过即亮，适合快速定位整行数据
• 如果同时定义两者，td:hover 优先级更高，可能覆盖 tr:hover 的背景色
• 跨列单元格（colspan）下，td:hover 会漏掉部分区域，tr:hover 更稳定

transition 怎么加才不抖动

加过渡本意是提升体验，但配错属性反而更糟。真正要过渡的只有 background-color，其他都容易引发重排。

安全写法：

• tbody tr { transition: background-color 0.2s ease; }
• 避免 transition: all 0.2s —— 后续加 border 或 padding 就会跳动
• 如果用了渐变背景，tr:hover 也得用同类型渐变，否则过渡中途回退成纯色
• 搭配 border-collapse: collapse，否则 hover 时边框可能双倍显示或错位

最常被忽略的是 td, th { background-color: inherit; } 这一行。Safari 对 inherit 支持严格，漏掉它，tr:hover 在 Safari 下几乎不可见。