HTML表格中如何实现鼠标停留时整行变色（实例演示）-html教程-PHP中文网

直接用 tr:hover 即可实现整行变色，无需 javascript；关键是要避免 td/th 覆盖背景、确保 border-collapse: collapse，并为 tr 设置初始 background-color（如 transparent），现代浏览器均支持。

html表格中如何实现鼠标停留时整行变色（实例演示）

hover 伪类直接作用于 `tr` 就够了

不需要 JavaScript，纯 CSS 就能实现整行变色。关键点是给 tr 元素加 :hover，而不是给 td 或 th 单独设样式——否则只高亮单元格，不是整行。

注意：tr 默认不支持背景色继承，但直接设置 background-color 是完全有效的。部分老版本 IE（如 IE6–7）不支持 tr:hover，但现代浏览器全部支持。

确保表格有明确的 border-collapse: collapse，否则 hover 背景可能被边框间隙割裂
如果用了 th，记得一并设置 tr:hover th，否则表头单元格颜色可能不统一
避免在 td 上设置 background-color 覆盖 tr:hover，否则 hover 失效

完整可运行示例（复制即用）

下面这段 HTML + CSS 可直接保存为 .html 文件打开测试：

姓名	城市
张三	北京
李四	上海

为什么有时 hover 不生效？常见原因

多数失效不是语法错，而是被其他样式压制或结构干扰：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

tr 子元素（比如 td）设置了 background-color，且没用 !important 或更具体选择器覆盖 —— hover 背景被遮住
表格用了 border-spacing（即 border-collapse: separate），导致 tr 实际渲染区域不连续，视觉上像“断开”的背景
在 Vue/React 等框架里，CSS 作用域限制（如 scoped）让 tr:hover 未命中真实 DOM 节点
某些 UI 库（如 Ant Design、Element Plus）对 table 做了深度封装，原始 tr 被包裹或替换，需查文档看是否提供 rowClassName 或类似钩子

需要兼容旧版 IE？用 JavaScript 补充方案

如果必须支持 IE8 及更早版本，CSS :hover 对 tr 无效，得用 JS 绑定事件：

document.querySelectorAll('table tbody tr').forEach(tr => {
  tr.addEventListener('mouseenter', () => {
    tr.style.backgroundColor = '#f5f5f5';
  });
  tr.addEventListener('mouseleave', () => {
    tr.style.backgroundColor = '';
  });
});

注意：不要用 onmouseover/onmouseout，它们会冒泡触发多次；mouseenter/mouseleave 更稳定。另外，若表格动态渲染（如分页加载），需在每次插入新 tr 后重新绑定，或改用事件委托。

实际项目中，除非明确要求支持 IE8，否则优先用纯 CSS 方案——更轻量、无 JS 依赖、样式逻辑集中。