tbody tr:hover 有效需满足：HTML 中显式存在 tbody 标签，且结构符合标准表格（thead/tbody/tfoot）；触屏设备默认不支持 hover，需用 @media (hover: hover) 或 touchstart/touchend 模拟；避免 pointer-events: none、优先级冲突及 transition: all 引发的布局抖动。
直接用 tbody tr:hover 就能实现，但 90% 的失效案例都卡在结构或选择器上，不是 CSS 写错了，而是 HTML 没写对或类名没配齐。
tbody tr:hover 必须存在 tbody 标签
浏览器只认标准表格结构：表头 thead、主体 tbody、页脚 tfoot。如果省略 tbody，哪怕 DOM 中自动补全了，CSS 选择器 tbody tr:hover 依然不匹配。
- 错误写法：
<table><tr><td>...</td></tr></table>—— 没有tbody，tr直接挂在table下 - 正确写法：
<table><tbody><tr><td>...</td></tr></tbody></table> - Vue/React 动态渲染时，别用
或Fragment包裹tr，必须显式写<tbody> - Bootstrap 用户注意：
.table-hover的样式规则是.table-hover > tbody > tr:hover，漏掉任意一层都会失效
:hover 不生效的常见原因和排查点
不是所有“悬停没反应”都是代码问题，得看环境和上下文。
- 触屏设备（iOS/Android）默认不触发
:hover，@media (hover: none)下该伪类被忽略 - 父元素设置了
pointer-events: none，会拦截所有鼠标事件，包括 hover - CSS 优先级冲突：比如某处写了
tr { background: white !important }，就会盖掉tr:hover的背景色 - JS 动态添加的 class 覆盖了 hover 效果，例如用
row.classList.add('active')后没移除，导致 hover 看不出变化 - 用了
border或outline改变尺寸，造成行高跳动，视觉上像“没高亮”，其实是布局重排了
加 transition 让颜色变化更自然
纯色切换太生硬，加个过渡就能明显提升体验，但要注意只过渡安全属性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
tbody tr { transition: background-color 0.2s ease; } - 别写
transition: all 0.2s—— 万一后续加了padding或border，就会引发布局抖动 - 如果用了渐变背景，hover 时也得用同类型渐变，否则过渡会中断或回退到纯色
- 移动端可配合
@media (hover: hover)条件启用 transition，避免触屏设备浪费渲染
移动端 fallback：touchstart 模拟 hover
真要支持触摸设备上的“悬停感”，得靠 JS 补位，但别用 mouseover/mouseout —— 它们在手机上基本不触发。
- 监听
touchstart给当前行加临时 class，比如tr.touched - 用
touchend清除，但注意防误触：加个 150ms 延迟再移除，避免点击按钮时高亮残留 - CSS 中统一定义：
tbody tr:hover, tbody tr.touched { background-color: #f8f9fa; } - 更稳妥的做法是改用点击高亮（
tr:focus-within或tr[aria-selected="true"]），语义更清晰，也兼容键盘导航
最常被忽略的是：hover 效果依赖于精确的 DOM 层级和设备能力判断，而不是单纯写对一个选择器。结构错一点，整行就静音；没考虑 touch 设备，PC 上再完美也白搭。
