tr:hover背景高亮没反应是因为td/th默认背景覆盖了tr的背景；需同时设置tr:hover td/th背景色并确保其透明或继承，且推荐用tbody tr:hover避免误匹配。
tr:hover 背景高亮为什么没反应？
直接写 tr:hover { background: #f0f0f0; } 却没效果，大概率是被其他样式覆盖了，或者表格单元格（td/th）本身设置了背景色，把行的背景盖住了。CSS 中 td 的背景优先级高于 tr，所以 hover 效果会被“吃掉”。
- 必须同时给
td和th设置background: transparent或继承父级背景 - 如果用了 CSS 框架（如 Bootstrap），检查是否启用了
.table-hover类——它内部已处理了兼容逻辑，自己再写tr:hover可能冲突 - IE8 及更早版本不支持
:hover伪类作用于非a元素，但现代项目基本可忽略
如何让 hover 高亮真正生效且不破坏边框？
表格默认有 border-collapse: collapse，此时 tr 本身不占渲染空间，背景色会从 td 边框内侧开始填充，容易出现缝隙或错位。关键是要统一控制单元格的背景与边框行为。
- 显式设置
border-collapse: collapse（确保边框合并） - 给
td, th加background-clip: padding-box，避免背景溢出到边框区域 - hover 时用
transition: background 0.2s ease让变化更平滑（注意：不要对tr做 transform 或 opacity 动画，可能触发重排） - 示例片段：
table tr:hover td, table tr:hover th { background: #eef7ff; }<br>table td, table th { background: white; }
鼠标移入整行时，如何避免点击区域变小？
如果 td 内容少、留白多，悬停响应区域可能只集中在文字周围，而不是整行。这不是 hover 本身的问题，而是盒模型导致的交互感知偏差。
- 给
td和th加padding（比如padding: 8px 12px），扩大可响应区域 - 避免在
td里用display: inline-block或浮动元素，它们会收缩内容宽度，进一步缩小 hover 区域 - 若需精确控制高亮范围，可用
tr:hover * { background: … }，但慎用——通配符性能略差，且可能意外影响子元素（如按钮、图标）
深色主题下 hover 背景怎么选才不刺眼？
纯黑背景配亮色 hover（比如 #ffffff）会产生强烈对比，反而干扰阅读。真正的“高亮”不是提亮，而是提供视觉锚点。
- 推荐用低饱和度、中明度的颜色，例如
#2d3748（比深灰略浅）或rgba(255, 255, 255, 0.06) - 用
backdrop-filter: blur(1px)（配合透明背景）可增强层次感，但注意 Safari 需加-webkit-前缀 - 务必测试键盘导航（Tab 进入表格）时的焦点状态，
:focus-within可配合使用，但不能替代 hover
实际项目里最容易被忽略的是 td 的背景覆盖行为——很多人调了半天 tr:hover，最后发现只是忘了把单元格背景设为透明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
