为表格行添加鼠标悬停高亮效果，核心是用css的:hover伪类设置tr背景色，并确保border-collapse: collapse、td/th无遮挡背景、必要时提升选择器权重及添加transition过渡。
给表格行添加鼠标悬停高亮效果，核心是用 CSS 的 :hover 伪类选中 <tr> 元素，并设置背景色。关键在于确保表格和单元格的样式不会干扰悬停效果。
<h3>确保表格使用正确的边框模型</h3>
<p>默认情况下，表格的边框可能塌陷（<code>border-collapse: collapse），这有时会让悬停背景看起来不连贯。建议显式设置：
给 tr 添加 hover 背景色
直接对 tr 设置 :hover 即可，无需 JavaScript：
- 推荐用浅灰（如
#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">，再写 <code>tr:not(.no-hover):hover
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
