tr:hover 需配合 border-collapse: collapse、限定 tbody、添加 background-color 过渡及 @media 查询适配移动端。常见错误包括 hover 写在 td/th、未合并边框、忽略 tbody 作用域、滥用 transition: all 及未处理触屏 fallback。
直接给 tr:hover 设背景色就能生效，但多数人卡在表头也被高亮、过渡生硬、移动端失效这三处。
为什么 tr:hover 有时没反应？
常见错误是把 hover 写在 td 或 th 上——这只能变单格，不是整行；或者忘了表格边框合并，导致 hover 背景被边框割裂。
必须确保：
-
table设置了border-collapse: collapse，否则tr的背景会被默认边框“打断” - 不要用
display: block或inline覆盖tr的默认table-row显示模式 - 如果用了
el-table等框架组件，原生tr:hover不生效，得走框架提供的类名（比如.el-table__row:hover）
只让数据行响应 hover，排除表头
表头 th 通常不该随数据行一起变色，否则视觉重心混乱。正确写法是限定作用域到 tbody：
tbody tr:hover {
background-color: #f0f8ff;
cursor: pointer;
}
注意：thead tr:hover 会同时影响所有表头行，而 tbody tr:hover 只管数据部分。如果表格没写 <tbody>，浏览器会自动补，但显式写出更可靠。
立即学习“前端免费学习笔记（深入）”；
加 transition 让颜色变化不突兀
纯 background-color 切换像开关一样硬，加过渡就顺滑得多。但别写 transition: all——它会把 border、padding 等无关属性也卷进来，引发重绘抖动：
- ✅ 推荐：
transition: background-color 0.2s ease; - ❌ 避免：
transition: all 0.2s; - 初始状态要显式声明
background-color（哪怕值是transparent），否则过渡起点不确定
移动端 hover 基本不可靠
iOS Safari 和多数安卓浏览器里，:hover 只在模拟鼠标（比如连了蓝牙触控板）时触发；真机触摸只会“闪一下”，且延迟明显。所以：
- 别用
:hover实现关键交互（比如展开详情、触发删除） - 若必须视觉反馈，改用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，让它只在精确指针设备上生效 - 对纯触屏场景，用 JS 监听
touchstart+touchend切换 class 更稳
真正容易被忽略的，是过渡动画和移动端 fallback 的组合——写了 hover 却没配 @media 查询，等于在手机上白忙活。
