table tr:hover 没反应，主因是 td/th 背景色覆盖、css 优先级不足、ie8 不支持、border-collapse 导致边框错位及移动端 touch 下 hover 失效。
table tr:hover 为什么没反应？检查是否被其他样式覆盖
直接写 table tr:hover { background-color: #f0f0f0; } 却不生效，大概率是 CSS 优先级或继承问题。表格行（tr）默认不渲染背景，它的背景色实际由 td 或 th 承载；如果单元格设置了 background-color，就会盖掉 tr:hover 的效果。
实操建议：
- 给
td和th设置background-color: inherit;，让它们继承tr的 hover 背景 - 或者更稳妥：直接对
tr:hover td, tr:hover th设置背景色，绕过继承链 - 用浏览器开发者工具检查元素，看 hover 状态下 computed 样式里
background-color是否被 !important 或更高优先级规则压制
IE8 及以下不支持 tr:hover？用 JavaScript 回退方案
:hover 伪类在 IE8 中仅支持 a 标签，对 tr 无效。如果必须兼容老 IE，不能只靠 CSS。
实操建议：
- 用
onmouseover/onmouseout直接操作tr的className，配合 CSS 类切换背景 - 更轻量：只监听
table，用事件委托判断event.target.tagName === 'TR'，避免给每行绑事件 - 现代项目可忽略此问题，但若维护政府/金融类旧系统，得确认是否真需支持 IE8 —— 很多场景其实已可放弃
hover 行高亮时边框错位？border-collapse 影响渲染
当表格设了 border-collapse: collapse;，tr:hover 改背景后，相邻行的边框可能因重叠逻辑导致视觉跳动或颜色断层。
实操建议：
- 统一用
border-collapse: separate;+border-spacing: 0;，这样每行背景独立，hover 更稳定 - 若必须用
collapse，改用box-shadow: inset 0 0 0 9999px #f0f0f0;模拟背景填充（利用超大内阴影覆盖整行，不干扰边框计算） - 避免在
td上单独设border，否则 hover 时边框颜色不同步会更明显
移动端 touch 设备 hover 失效？别依赖 :hover 做核心交互
iOS Safari 和部分安卓浏览器中，:hover 仅在模拟鼠标（如外接触控板）时触发；纯触摸下，第一次点击才激活 hover，第二次才真正生效，体验割裂。
实操建议：
- 把 hover 效果当作“增强”，而非功能必需 —— 比如仅用于视觉反馈，不用于显示隐藏内容或触发关键操作
- 需要明确交互反馈时，用
:active配合 JS 添加临时 class，或监听touchstart/touchend - 测试时务必真机验证，模拟器里的 hover 行为和真实触摸完全不同
hover 行变色看着简单，但实际卡点全在细节：单元格背景继承、老浏览器限制、边框模型、触控设备行为差异……最常被忽略的是——你写的 tr:hover 样式，根本没机会应用到任何像素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
