tr:hover 直接加背景色无效是因为 tr 本身不渲染背景，其背景会被 td/th 子元素覆盖；需同时设置 tr:hover td 和 tr:hover th 的背景色，并确保 td/th 原始背景为 transparent 或未声明。
tr:hover 直接加背景色为什么没反应
多数情况下不是写法错，而是 tr 本身不渲染背景——它的背景会被子元素（比如 td、th）的背景覆盖。浏览器默认把 tr 当作“透明容器”，即使你给 tr:hover 设了 background-color，只要 td 没设透明背景，就完全看不见效果。
解决办法是让单元格继承或响应行的 hover 状态：
- 给
tr:hover td和tr:hover th显式设置背景色 - 确保
td/th原始背景为transparent或无声明（避免覆盖） - 如果用了
border-collapse: collapse，还要注意边框叠加可能遮挡颜色过渡
兼容性与选择器写法要注意什么
老版本 IE（IE8 及以下）不支持 tr:hover，但现代项目基本不用考虑。真正容易出问题的是选择器优先级和嵌套结构：
- 如果表格有 class（如
class="data-table"），建议用.data-table tr:hover td而非泛用tr:hover td，避免意外影响其他表格 - 如果
td内有内联样式或!important背景声明，hover 效果会被强制覆盖 - 使用 CSS-in-JS 或 Shadow DOM 时，需确认样式作用域是否包含
tr和td
带斑马纹的表格 hover 怎么不打架
当已有 tbody tr:nth-child(even) 这类斑马纹时，hover 颜色必须比条纹色更明确，否则视觉上会“跳变”或失效：
.table-striped tbody tr:nth-child(even) td {
background-color: #f9f9f9;
}
.table-striped tbody tr:hover td {
background-color: #e3f2fd !important; /* 强制覆盖条纹 */
}
关键点：
- 用
!important是合理且常见的做法，因为:nth-child的优先级通常低于:hover组合选择器，但实际计算中可能被绕过 - 颜色对比要足够——浅灰 hover 浅灰条纹，人眼根本看不出变化
- 不要只改
tr背景，仍得同步作用到td和th
移动端 touch 设备 hover 失效怎么办
iOS Safari 和部分 Android 浏览器在非链接/按钮元素上对 :hover 支持不稳定，点击后才触发、或根本不触发。这不是 bug，是规范行为。
稳妥方案是加一层 JS 响应：
document.querySelectorAll('table tr').forEach(row => {
row.addEventListener('touchstart', () => {
row.classList.add('hover');
});
row.addEventListener('touchend', () => {
row.classList.remove('hover');
});
});
再补一条 CSS：
tr.hover td, tr:hover td {
background-color: #e3f2fd;
}
这样 PC 和移动都能一致生效。注意别漏掉 touchcancel 防止状态残留，真实项目中建议用 pointerdown/pointerup 替代以兼容更多设备。
hover 的边界其实很窄：它依赖渲染树层级、样式优先级、设备输入模型。稍微嵌套深一点、加个 position: relative、甚至用了 will-change，都可能让背景“消失”。动手前先检查 computed styles 里的 background-color 是否真被应用到 td 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
