tbody tr:hover 必须显式写 tbody 标签，因为 CSS 选择器匹配 HTML 源码结构而非渲染树；省略 tbody 会导致选择器失效，且需避免 !important、pointer-events: none、布局抖动及触屏 hover 失效等问题。

tbody tr:hover 为什么必须显式写 标签

浏览器对 tbody tr:hover 的匹配依赖标准表格结构，不是“自动补全就能用”。DOM 中即使浏览器悄悄加了 tbody，CSS 选择器仍不会生效——因为选择器匹配的是 HTML 源码结构，不是最终渲染树。

常见错误写法：<table><tr><td>数据</td></tr></table>，这种写法下 tr 是 table 的直接子元素，tbody tr:hover 完全不命中。

• 正确结构必须显式包含 <tbody>：哪怕只有一行数据，也要写 <table><tbody><tr><td>数据</td></tr></tbody></table>
• Vue/React 动态渲染时，别用 <Fragment> 或空标签包裹 tr，它们会破坏 tbody → tr 的父子关系
• Bootstrap 用户注意：.table-hover 的规则是 .table-hover > tbody > tr:hover，漏掉任意一层（比如多套了一层 <div>）都会失效

tr:hover 样式被覆盖或不生效的典型原因

不是代码写错了，而是环境或层级干扰了样式计算。最常踩的坑集中在三类：

• tr 上写了 !important 的背景色（如 background: #fff !important），直接压掉了 :hover 的声明
• 父容器设置了 pointer-events: none，鼠标事件被拦截，:hover 根本不会触发
• 用了 border 或 outline 在悬停时改变尺寸，导致行高跳动，视觉上像“没变色”，其实是布局重排掩盖了颜色变化
• 在触屏设备（iOS/Android）上，:hover 默认被忽略；可用 @media (hover: hover) 包裹来条件启用

transition 怎么加才安全不抖动

加过渡动画提升体验是对的，但乱用 transition: all 会埋雷。一旦后续改了 padding 或 border，就会引发意外的布局抖动。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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

• 只过渡安全属性：tbody tr { transition: background-color 0.2s ease; }
• 如果用了渐变背景，:hover 里也得用同类型渐变，否则过渡会中断回退到纯色
• 避免在 tr 上设 display: block 等破坏表格渲染模式的样式，否则 :hover 可能失灵或错位
• 表头（thead tr）通常不需要悬停效果，用 tbody tr:hover 显式限定范围，比 tr:hover 更可控

移动端怎么模拟“悬停感”

手机没有 hover，但用户点一下某行，往往也希望有即时反馈。不能靠 onmouseover——它在触屏上基本不触发。

• 监听 touchstart 给当前 tr 加临时 class，比如 tr.touched
• 用 touchend 清除，但加个 150ms 延迟再移除，防止点击按钮时高亮残留
• 不要用内联 JS 写 onmouseover，既难维护又破坏可访问性，键盘用户和屏幕阅读器完全感知不到
• 真要兼顾所有设备，优先用 CSS 实现桌面端效果，JS 只作为移动端 fallback，而不是主逻辑

真正卡住人的从来不是 tr:hover 这行代码，而是 tbody 漏写了、!important 盖住了、或者以为 touch 设备也能 hover —— 这些细节不检查，再简洁的 CSS 也白搭。