tr:hover没反应需检查三件事：一是tr是否为tbody直接子元素，须用tbody tr:hover；二是td/th背景色是否覆盖tr背景，需设background-color:inherit；三是IE8及以下不支持tr:hover，需JS模拟。
tr:hover 为什么没反应？检查这三件事
表格行悬停高亮失效，大概率不是 tr:hover 本身有问题，而是被其他样式压制或结构不支持。
- 确保
<tr>是直接子元素：如果表格用了<tbody>（推荐写法），tr:hover必须写在<tbody>内部或用更明确的选择器，比如tbody tr:hover - 检查是否有
background-color被!important锁死，或者被单元格<td>/<th>的背景色盖住——tr的背景色默认不会穿透到单元格，必须显式设置td, th { background-color: inherit } - IE8 及更早版本完全不支持
:hover伪类作用于非<a>元素，如需兼容，得用 JS 模拟
如何让 hover 效果真正“只影响当前行”
直接写 tr:hover { background-color: #f0f9ff } 看似简单，但常因边框塌陷、单元格 padding 或 border 导致视觉错位。
- 加
border-collapse: collapse到<table>，避免 hover 时边框双倍出现 - 给
td, th统一设置background-color: inherit，否则有些浏览器（如 Safari）下tr的背景色不会渲染到单元格 - 慎用
transition：对background-color加过渡动画没问题，但对height或padding做 hover 动画会触发重排，卡顿明显
移动端点击无 hover？这是正常行为
绝大多数触摸设备（iOS/Android 浏览器）在首次点击后才触发 :hover，且可能只维持极短时间，甚至不触发。这不是 bug，是规范行为。
- 不要依赖
tr:hover在手机上提供关键交互反馈 - 若需统一反馈，改用
:active+ JS 添加临时 class，例如点击时加is-highlighted，300ms 后移除 - 或者改用
@media (hover: hover)媒体查询做条件启用：@media (hover: hover) { tr:hover { background-color: #f0f9ff; } }
复杂表头/合并单元格时 hover 失效怎么办
当表格含 rowspan 或 colspan，tr:hover 仍生效，但视觉上可能“漏掉”某些区域——因为合并单元格实际跨越了多行，而 hover 只作用于当前 tr 所在行的单元格部分。
立即学习“前端免费学习笔记（深入）”；
- 无法靠纯 CSS 让跨行单元格随任意一行 hover 高亮，这是 CSS 限制
- 可行解：用 JS 监听
tr的mouseenter，找出该行所有关联的td[rowspan]和其向下延伸的单元格，手动加 class - 更轻量做法：放弃跨行单元格的“完整高亮”，只保证本行常规单元格响应，并用 subtle 边框或文字颜色变化辅助识别
hover 行高亮看着简单，但真要覆盖各种表格结构、浏览器差异和交互场景，得一层层拆开看约束条件。最常被忽略的是 background-color 的继承链和移动端的 hover 语义差异。
