表格行悬停变色应直接对 <tr> 使用 :hover，配合 border-collapse: collapse 和 background-color: inherit 确保视觉一致；需注意旧版IE兼容性、深色模式适配及框架中key稳定性。
表格行悬停变色用 :hover 最直接
不用 JavaScript，纯 CSS 就能搞定。关键是把 :hover 作用在 <tr> 上，而不是 <td> 或 <th> —— 否则会出现单元格各自变色、边框错位等问题。
常见错误是给 <td> 单独加 :hover，结果鼠标移到相邻单元格时颜色跳变、内边距不一致，视觉上像“断开的色块”。
- 确保
<table>有border-collapse: collapse，否则悬停时边框会双线重叠 - 给
<tr>设置背景色，同时设置<td>和<th>的background-color: inherit（或留空），避免覆盖 - 如果表格有表头
<thead>，通常不希望<th>行也响应悬停，那就单独给tbody tr:hover
table {
border-collapse: collapse;
}
tbody tr:hover {
background-color: #f5f5f5;
}
td, th {
padding: 8px;
border: 1px solid #ddd;
}
兼容老版本 IE 要注意选择器写法
IE8 及更早版本不支持 tbody tr:hover，只认 tr:hover，但直接写可能误触表头行。实际项目中若需兼容，得权衡是否允许 <th> 行也变色。
另一个坑是：IE6–7 根本不支持 :hover 作用于非 <a> 元素，这时必须用 JavaScript 模拟，比如监听 onmouseover/onmouseout 切换 class。
立即学习“前端免费学习笔记（深入）”；
- 现代项目基本可忽略 IE6–7，但若维护遗留系统，检查 UA 或用条件注释加载 JS fallback
- 不要用
*:hover这类通配写法，触发重绘范围过大，滚动卡顿 - 如果表格嵌套在
contenteditable区域里，某些浏览器下:hover会失效，需改用 class 控制
深色主题下悬停色要兼顾可访问性
很多人随手设 #eee 或 #f0f0f0，但在深色模式或高对比度模式下，这些浅灰可能和背景色对比不足，导致文字看不清。
Chrome 和 Firefox 已支持 @media (prefers-color-scheme: dark)，建议主动适配：
@media (prefers-color-scheme: dark) {
tbody tr:hover {
background-color: #333;
}
}
- 用
color-scheme: light dark声明在<html>标签上，有助于浏览器正确启用系统级颜色切换 - 悬停色与默认色之间至少保持 3:1 的对比度（可用 axe 或 WAVE 插件验证）
- 避免仅靠颜色区分状态——如果用户色觉障碍，悬停时最好同步加轻微阴影或边框变化
React/Vue 中动态表格要注意事件绑定时机
框架里渲染表格时，如果行是用 v-for 或 .map() 动态生成的，:hover 本身不受影响；但容易出问题的是：表格数据更新后，DOM 重排导致 hover 状态“闪退”或延迟响应。
- React 中确保每行有稳定
key，否则悬停时 React 重渲染可能销毁并重建<tr>，中断 hover 流程 - Vue 里如果用了
v-show隐藏某行，:hover仍会生效（元素还在 DOM），应改用v-if - 若表格启用了虚拟滚动，真实 DOM 中只有可视区域的
<tr>，悬停样式自然只作用于当前显示行，这是预期行为，不必额外处理
border-collapse 和 key 这两个点，线上翻车八成出在这儿。 
