最简单可靠的表格行悬停变色方式是直接给添加:hover样式，纯css实现且兼容现代浏览器；需避免作用于或使用js，注意border-collapse设置、样式优先级及单元格背景透明化，并考虑深色模式适配。
hover 伪类直接作用在 <tr> 上就行
<p>表格行悬停变色最简单可靠的方式，就是给 <code><tr> 元素加 <code>:hover 样式。不需要 JS，纯 CSS 就能生效，且兼容所有现代浏览器。
常见错误是试图给 <td> 单独写 hover——这样会导致鼠标在单元格间隙移动时颜色闪烁，体验差；或者用 JS 绑定 <code>mouseenter/mouseleave，纯属多此一举。
示例写法：
table tr:hover {
background-color: #f5f5f5;
}
注意：如果表格有 border-collapse: collapse，<tr> 的背景会自然铺满整行；若为 <code>separate（默认），可能因 cell-spacing 留白导致背景不连贯——这时建议统一设为 collapse。
为什么有时候 hover 不生效？检查这三点
实际写完没反应，大概率卡在这几个地方：
<tr> 上有内联样式或更高优先级的 <code>background-color，把 hover 覆盖了- 表格用了
<tbody>，但 CSS 选择器漏写了，比如写成 <code>table tr:hover没问题，但若只写tr:hover在某些嵌套结构里可能失效 - 单元格（
<td> 或 <code><th>）自身设置了 <code>background-color，它会盖住<tr> 的背景色——解决办法是让单元格背景透明：<code>background-color: transparent;需要兼容 IE8？别用
:hover作用于<tr> <p>IE8 及更早版本不支持对非 <code><a></a>元素使用:hover，所以直接写tr:hover会完全无效。此时必须用 JS 补救，但不用监听事件，推荐用 class 切换：
table tr:hover, table tr.hover { background-color: #f5f5f5; }再配一行 JS（放在表格后或 DOMReady 里）：
document.querySelectorAll('table tr').forEach(tr => { tr.addEventListener('mouseover', () => tr.classList.add('hover')); tr.addEventListener('mouseout', () => tr.classList.remove('hover')); });注意：IE8 不支持
classList，得改用className字符串操作，但除非真要支持 IE8，否则现在基本不用管。深色主题下 hover 颜色容易看不清
用户切换系统深色模式后，硬写的浅灰
#f5f5f5可能和背景色接近，甚至变成“反向高亮”。更稳妥的做法是用相对颜色：- 用
rgba(0,0,0,0.04)替代固定色值，确保在浅/深背景下都可见 - 或者借助
color-scheme: light dark和@media (prefers-color-scheme: dark)单独定义暗色模式下的 hover 色 - 避免用纯白/纯黑做 hover 背景，对比度过高反而干扰阅读
真正难的不是写几行 CSS，而是 hover 色在不同背景、不同缩放、不同屏幕亮度下是否始终可辨——这点常被忽略。
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
