为表格行添加鼠标悬停高亮效果，核心是用CSS的:hover伪类设置tr背景色，并确保border-collapse: collapse、td/th无遮挡背景、必要时提升选择器权重及添加transition过渡。
给表格行添加鼠标悬停高亮效果，核心是用 CSS 的 :hover 伪类选中 <tr> 元素，并设置背景色。关键在于确保表格和单元格的样式不会干扰悬停效果。
确保表格使用正确的边框模型
默认情况下，表格的边框可能塌陷（border-collapse: collapse），这有时会让悬停背景看起来不连贯。建议显式设置：
<style>
table { border-collapse: collapse; width: 100%; }
td, th { padding: 8px; text-align: left; border: 1px solid #ddd; }
</style>
给 tr 添加 hover 背景色
直接对 tr 设置 :hover 即可，无需 JavaScript：
<style>
tr:hover { background-color: #f5f5f5; }
</style>
- 推荐用浅灰（如
#f5f5f5或#f9f9f9）避免与文字对比过强 - 如果表头
th也需要悬停，可单独写th:hover，但通常不建议对表头做悬停 - 若某行含
th（如首行），它也会响应tr:hover，不影响效果
处理 z-index 和层叠干扰（常见问题）
如果悬停背景没显示，可能是以下原因：
立即学习“前端免费学习笔记（深入）”；
-
td或th自身设置了背景色，会盖住tr的背景 → 给td, th设background-color: transparent或省略背景 - 表格用了
border-spacing（分离边框模式），导致tr背景被间隙“割裂” → 改用border-collapse: collapse - 某些 CSS 框架（如 Bootstrap）重置了
tr:hover样式 → 检查开发者工具，提高选择器权重，例如写成tbody tr:hover
增强体验的小技巧
让高亮更自然、易读：
- 加过渡动画：
tr { transition: background-color 0.2s ease; } - 悬停时微调文字颜色（可选）：
tr:hover td { color: #333; } - 排除特定行（如表头或分隔行）：
tbody tr:hover { ... }或给不需要的行加 class 如<tr class="no-hover">，再写tr:not(.no-hover):hover
