hover伪类没生效，主要因三点：tr默认透明背景需显式设置；border-collapse:collapse影响tr背景铺满，建议改用td:hover；外层pointer-events:none会禁用悬停。
hover 伪类为什么没生效？检查这三点
表格行悬停变色失效，八成是 CSS 选择器权重不够或 HTML 结构不匹配。最常见的是直接写 tr:hover 却忘了 tr 默认没有背景色（透明），导致“变色”看起来像没反应。
- 确保目标元素有可渲染的背景：给
tr或td显式设置background-color初始值（哪怕只是#fff） - 避免被父级样式覆盖：检查是否被
table的border-collapse: collapse影响——它会让tr的背景无法完整铺满，此时建议对td或th应用 hover - 不要嵌套在禁用 pointer-events 的容器里（比如某个外层 div 设置了
pointer-events: none）
tr:hover vs td:hover：选哪个更稳妥？
用 tr:hover 逻辑清晰，但兼容性略弱于 td:hover；而 td:hover 在老版 IE 中支持更好，且能避开某些 border 渲染 bug。
- 如果只要整行高亮：优先用
tr:hover { background-color: #f5f5f5; }，但记得给tr设初始背景（如background-color: #fff） - 如果表格有合并单元格（
rowspan/colspan）：改用td:hover, th:hover更可靠，否则悬停在跨行单元格时可能漏掉部分区域 - 移动端注意：hover 在触摸设备上无意义，别依赖它做核心交互（比如仅靠 hover 显示操作按钮）
怎么让 hover 变色更顺滑？加 transition 就完事？
直接加 transition: background-color 0.2s 看似简单，但容易踩两个坑：一是 background-color 在 transparent 和 solid 色之间过渡会发虚；二是表格重绘频繁时卡顿。
- 始终用 solid 颜色起始和结束，避免
transparent：写成background-color: #ffffff→background-color: #f0f8ff - 对
td加 transition 比对tr更稳定（因tr不是渲染盒子，某些浏览器下 transition 不触发） - 如果表格行数超百，hover 动画可能掉帧——这时建议关掉 transition，或只对可视区域内的行启用（需 JS 配合）
除了变色，还能顺便改什么样式？
hover 是入口，但别只改背景。几个实用又轻量的增强点：
- 加一点垂直位移：
transform: translateY(-1px)，配合transition让行“浮起来”，但别用margin-top（会引发重排） - 微调文字颜色：
color: #2c3e50→color: #1a252f，比纯背景变化更易感知 - 隐藏/显示操作列：用
opacity: 0+transition: opacity 0.15s控制工具按钮，比 display 切换更平滑
真正难的不是写 hover，而是判断什么时候不该用 hover——比如数据密集型表格，频繁悬停反而干扰阅读。留个心眼：hover 是锦上添花，不是功能刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
