tr:hover 背景无效是因为 td/th 默认背景覆盖了 tr 的背景；解决需同时设置 tr:hover td/th 背景色且确保其透明或未设色；推荐用 tbody tr:hover 避免误匹配；斑马纹冲突时可用 !important；移动端需用 @media(hover: hover) 或 JS 模拟。
tr:hover 直接写背景色为什么没反应
多数情况不是选择器写错了，而是 tr 本身不渲染背景——它的背景会被子元素 td 或 th 的背景完全盖住。浏览器把 tr 当作“透明容器”，哪怕你写了 tr:hover { background-color: #eee; }，只要 td 没设 background-color: transparent 或没声明背景，就根本看不到变化。
解决办法只有两个关键动作：
- 必须显式设置
tr:hover td和tr:hover th的背景色 -
td、th原始背景不能是不透明色（比如默认的白色或继承值），否则会挡住tr的 hover 效果
tbody tr:hover 还是 tr:hover？选哪个更稳
推荐始终用 tbody tr:hover。因为标准表格结构中，数据行基本都在 tbody 里；直接写 tr:hover 容易误命中 thead 或 tfoot 的行，导致表头也被高亮，或者在某些 DOM 构建方式下（比如 JS 动态插入）失效。
如果你的表格有 class，比如 class="data-table"，更稳妥的写法是：
.data-table tbody tr:hover td {
background-color: #e3f2fd;
}
这样既避免全局污染，又绕开了优先级冲突问题。
斑马纹表格里 hover 颜色被条纹盖住了怎么办
当用了 tbody tr:nth-child(even) td { background-color: #f9f9f9; } 这类斑马纹规则后，tr:hover td 的颜色大概率会被覆盖——因为 :nth-child 和 :hover 的选择器权重相同，后定义的不一定胜出，尤其在复杂嵌套中。
最直接有效的解法是加 !important：
.data-table tbody tr:hover td {
background-color: #bbdefb !important;
}
这不是妥协，而是合理手段。同时注意两点：
- 颜色对比要足够强，浅灰 hover 浅灰条纹，人眼根本看不出区别
- 别只改
td，th也得同步写，否则表头行 hover 时会漏掉单元格
移动端点一下才变色，是 bug 吗
不是 bug，是规范行为。iOS Safari 和多数 Android 浏览器在非可点击元素（比如普通 tr）上，:hover 只在首次点击后触发一次，且持续时间极短甚至不可见。
真要兼顾移动端，有两个轻量方案：
- 用媒体查询条件启用：
@media (hover: hover) { tbody tr:hover td { background-color: #e3f2fd; } } - 改用 JS 添加临时 class：
tr.addEventListener('click', e => { e.target.closest('tr').classList.add('is-hovered'); setTimeout(() => e.target.closest('tr').classList.remove('is-hovered'), 300); })
纯 CSS 的 :hover 在触摸设备上本质不可靠，这点容易被忽略，但实际项目里必须面对。
