tbody tr:hover 能实现整行高亮，但90%失效源于HTML未显式写tbody、选择器层级错误、pointer-events: none拦截、移动端无hover触发，或transition属性误用引发抖动。
直接用 tbody tr:hover 就能实现整行高亮，但 90% 的失效不是 CSS 写错，而是 HTML 结构没写对、选择器层级漏了，或者移动端根本没触发。
tbody tr:hover 为什么经常不生效
浏览器渲染时会自动补全 tbody，但 CSS 选择器 tbody tr:hover 不会匹配“隐式生成”的 tbody —— 它只认你手写的那一层。Vue/React 里如果用 <Fragment> 或空标签包裹 tr，tbody 就彻底没了。
- 必须显式写出
<tbody><tr>...</tr></tbody>，不能依赖自动补全 - Bootstrap 用户注意：
.table-hover的规则是.table-hover > tbody > tr:hover，漏掉>或多套一层 div 都会失效 - 父元素设了
pointer-events: none，整个 hover 就被拦死了，连td:hover也一样 - 写了
tr { background: white !important }，tr:hover的背景色就完全盖不住
怎么让 hover 变化更自然
纯色突变看着生硬，加 transition 是最简单有效的优化，但属性选错反而引发抖动。
- 只过渡安全属性：
tbody tr { transition: background-color 0.2s ease; } - 别写
transition: all 0.2s—— 后续加border或padding会触发重排，行高跳动 - 如果用了渐变背景，
tr:hover也得用同类型渐变，否则过渡中途回退到纯色 - 触屏设备（iOS/Android）默认不触发
:hover，可用@media (hover: hover)包裹 transition，避免无意义渲染
移动端怎么模拟 hover 感
手机没有悬停概念，mouseover/mouseout 基本不触发，也不能靠 :hover 蒙混过关。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart给当前tr加临时 class，比如tr.touched - 用
touchend清除，但加 150ms 延迟再移除，防止点击按钮时高亮残留 - 别用
tap或click替代 —— 它们延迟高、响应滞后，用户会觉得“卡” - 真要高亮整列，纯 CSS 几乎不可靠（
nth-child+:hover兼容性差），必须 JS 动态算列索引
td:hover 和 tr:hover 的关键区别
单元格悬停和行悬停看着差不多，但行为逻辑完全不同，选错会影响交互直觉。
-
td:hover是“点哪亮哪”，适合明细查看；tr:hover是“扫过即亮”，适合数据行快速定位 -
td:hover无法触发整行样式（比如字体加粗），除非额外加 JS - 合并单元格（
colspan/rowspan）下，td:hover会漏掉跨区部分，tr:hover更稳定 - 如果同时写
tr:hover和td:hover，后者优先级更高，可能覆盖前者背景色 —— 注意顺序和 specificity
真正麻烦的不是写几行 CSS，而是结构、环境、设备三者之间的隐性耦合。一个 tbody 标签没写，或一行 pointer-events: none，就能让整套 hover 彻底静音。
