表格行 hover 效果失效通常是因为单元格（td/th）设置了独立背景色，覆盖了 tr:hover 的样式；只需移除单元格的 background-color，让行级背景色自然透出即可。

表格行 hover 效果失效通常是因为单元格（`td`/`th`）设置了独立背景色，覆盖了 `tr:hover` 的样式；只需移除单元格的 `background-color`，让行级背景色自然透出即可。

在 CSS 中，tr:hover 为整行设置背景色时，其子元素（如 td 和 th）若显式声明了 background-color，会完全遮盖父级 tr 的背景——即使 tr 悬停时背景已变更，视觉上仍显示单元格自身的白色背景，导致 hover 效果“消失”。

✅ 正确做法是：将背景色统一交由 控制，而 和 不设背景色（或设为 transparent），使其继承或透出 tr 的背景。这样既能保证默认状态下表格整体呈现纯白（通过 tr 默认背景实现），又能让悬停时整行平滑变灰。

以下是优化后的完整 CSS 示例：

.specific-table-container {
  margin: 20px auto;
  width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff; /* 容器背景 */
}

.specific-table-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 关键修正：移除 td/th 的 background-color */
.specific-table-container th,
.specific-table-container td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  /* ❌ 删除这一行 → background-color: #fff; */
}

/* 默认行背景为白色（继承容器或浏览器默认），hover 时覆盖为灰色 */
.specific-table-container tr {
  background-color: #fff; /* 显式声明确保默认为白 */
}
.specific-table-container tr:hover {
  background-color: #f2f2f2; /* 悬停时整行变灰 */
}

⚠️ 注意事项：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 不要对 td/th 设置 background-color，否则会阻断 tr:hover 的视觉表现；
• 若需兼容旧版 IE 或特殊布局，可为 tr 显式添加 background-color: #fff（而非依赖继承）；
• 若表格含 thead/tfoot，建议单独为其 tr 设置背景，避免与 tbody tr:hover 冲突；
• 如需更精细控制（如仅 hover 时高亮数据行），可限定选择器为 .specific-table-container tbody tr:hover。

总结：CSS 层叠中，子元素背景色具有更高绘制优先级。实现表格行 hover 的核心逻辑是「降权单元格背景，升权行级背景」——结构越简洁，效果越可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！