表格行 hover 效果不生效，通常是因为单元格（td/th）设置了固定背景色，覆盖了 tr:hover 的样式；只需移除 td 和 th 的 background-color，让其继承父级 tr 的背景即可实现预期悬停效果。

表格行 hover 效果不生效，通常是因为单元格（`td`/`th`）设置了固定背景色，覆盖了 `tr:hover` 的样式；只需移除 `td` 和 `th` 的 `background-color`，让其继承父级 `tr` 的背景即可实现预期悬停效果。

在 CSS 中，tr:hover 为整行设置背景色时，若 <td> 或 <code><th> 元素自身定义了 <code>background-color（例如 #fff），该声明会直接覆盖 tr 的背景，导致悬停效果不可见——这是初学者最常见的样式层叠误区。

✅ 正确做法是：仅对 <tr> 设置背景（包括 hover 状态），而让 <code><td>/<code><th> 保持透明背景（即不设 <code>background-color），使其自然继承所在行的背景色。

以下是修复后的推荐 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; */
}

/* 悬停作用于整行，且无子元素干扰 */
.specific-table-container tr:hover {
  background-color: #f2f2f2; /* 浅灰，清晰可见 */
}

/* 可选：为表头行单独设置背景，增强可读性 */
.specific-table-container thead th {
  background-color: #eef2f7;
  font-weight: 600;
}

? 注意事项与最佳实践：

htmlppt.skill

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

下载

立即学习“前端免费学习笔记（深入）”；

• 不要给 td/th 设置 background-color，除非你明确需要覆盖行背景（如高亮某列）；
• 若需表格整体“白色底”，应通过 table 或容器 .specific-table-container 控制，而非每个单元格；
• 使用 :hover 时，确保目标元素（此处为 tr）在 DOM 中真实存在且未被 display: none 或 visibility: hidden 干扰；
• 在复杂布局中，可通过浏览器开发者工具（Elements → Styles）检查 td 是否意外继承或覆盖了背景色，快速定位冲突来源。

这样修改后，鼠标悬停任意表格行时，整行将平滑变为浅灰色，其余区域保持纯净白色背景，语义清晰、维护性强，也完全兼容现代浏览器。