table tbody tr:hover没反应主因是td/th背景覆盖、CSS优先级不足或选择器未精准命中；需确保tr无强制覆盖、td/th背景透明、选择器含tbody提高特异性，并注意Bootstrap等框架干扰及IE8/移动端兼容问题。
table tr:hover 为什么没反应？
多数情况是 CSS 优先级或选择器写错了。浏览器默认不给 tr 设背景色，且如果 td 或 th 自带背景（比如设置了 background-color），会盖住 tr:hover 的效果。
必须确保：① tr 没被其他样式强制覆盖；② td/th 没设固定背景色；③ 选择器能准确命中目标行。
- 推荐写法：
table tbody tr:hover { background-color: #f5f5f5; }（加tbody提高特异性） - 避免写成：
tr:hover td—— 这样虽然也能生效，但属于“间接设置”，一旦td有内联样式或更高优先级背景，就失效 - 若表格用了框架（如 Bootstrap），检查是否被其
.table-hover类干扰，可临时禁用对比验证
hover 行变色后文字看不清怎么办？
背景变浅但文字还是深色，对比度不足，尤其在暗色主题或低分辨率屏上容易发虚。不能只改 background-color，得同步控制文字颜色和过渡行为。
- 务必加上
color声明，例如：table tbody tr:hover { background-color: #eef2ff; color: #2a4c80; } - 加
transition防止闪烁或突兀跳变：tr { transition: background-color 0.2s, color 0.2s; } - 注意：IE10+ 才支持
tr上的transition，老版本需降级为 JS 监听mouseenter/mouseleave
需要兼容 IE8 怎么办？
:hover 在 IE8 只支持 a 标签，tr 直接无效。这时候必须换思路，不能硬扛伪类。
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 绑定事件：
tr.addEventListener('mouseover', ...)，动态加 class（如hovered），再用 CSS 写tr.hovered { ... } - jQuery 更简单：
$('table tr').hover(function(){ $(this).addClass('hovered'); }, function(){ $(this).removeClass('hovered'); }); - 注意：IE8 不支持
addEventListener，得用attachEvent或依赖 jQuery 1.x 版本（已内置兼容）
移动端点击行变色失效是为啥？
手机没有“悬停”概念，:hover 在 iOS/Android 浏览器里只在模拟鼠标时短暂触发（比如 Safari 点击后高亮一下），无法持续响应手指停留。
- 解决方案不是强行 hack
:hover，而是改用:active+touchstart事件配合 - 简单做法：加一句
tr:active { background-color: #e0e7ff !important; }，再在touchstart时给tr加临时 class，松开时移除 - 更稳妥的是放弃“悬停”逻辑，改用“点击选中”模式，用 JS 管理
selected状态，视觉反馈更符合移动习惯
td 和 th 的 background 是否透明、以及 border-collapse 是否为 collapse —— 后者会让 hover 背景在边框缝隙处断开，看着像没生效。 
