hover 失效主因是 td/th 背景色覆盖 tr:hover 样式，应将悬停效果设于 tr:hover 并避免影响布局的属性变更，配合 transition 仅作用于 background-color、合理设置选择器权重及媒体查询适配触控设备。
hover 只影响当前行，但鼠标移到单元格内却失效？
常见原因是 td 或 th 设置了背景色，盖住了 tr:hover 的样式。CSS 优先级里，直接作用在单元格上的 background-color 会覆盖父级 tr:hover 的设置。
- 把悬停效果写在
tr:hover上，而不是td:hover—— 后者会导致每格单独响应，视觉不连贯 - 确保
tr没有被设为display: block或其他破坏表格布局的值，否则:hover可能不触发 - 如果用了
border-collapse: collapse，记得给tr:hover td和tr:hover th都设背景，避免表头和数据单元格颜色不一致
如何让悬停色平滑过渡且不闪动？
默认 hover 是瞬时切换，肉眼可见“跳变”。加 transition 能缓解，但表格单元格的边框、padding、字体粗细变化都可能引发重排（reflow），导致闪烁或抖动。
- 只对
background-color做过渡：transition: background-color 0.2s ease; - 避免在
tr:hover中修改border、padding或font-weight—— 这些会触发布局重算 - 如果表格用了
box-shadow悬浮效果，务必用will-change: transform或给tr加transform: translateZ(0)触发 GPU 加速，否则滚动时易卡顿
隔行变色 + 悬停变色同时存在时颜色冲突怎么办？
tr:nth-child(even) 和 tr:hover 的样式会叠加，但浏览器按声明顺序应用——后写的规则优先。如果 hover 色被隔行色盖住，说明 hover 样式写在了前面，或者没提高特异性。
- 把
tr:hover放在tr:nth-child(even)和tr:nth-child(odd)之后 - 更稳妥的做法是提高选择器权重：
tbody tr:hover或.table-class tbody tr:hover - 不要用
!important—— 它会让后续维护困难，尤其当表格嵌套在框架组件里时，容易被外部样式意外覆盖
移动端 touch 设备上 hover 效果不生效？
绝大多数触摸屏浏览器（iOS Safari、Android Chrome）不支持真正的 :hover，只在点击后短暂触发，且不会持续高亮。这不是 bug，而是规范行为。
- 纯靠 CSS 无法实现“触摸后持续高亮”，必须配合 JS 监听
touchstart给元素加临时 class（如is-hovered） - 若坚持用纯 CSS，可退而求其次：用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，明确限定仅在鼠标设备生效 - 注意 iOS 上
:active伪类默认有 300ms 延迟，需加touch-action: manipulation到table或tr上才能即时响应
真正难的不是写对一行 hover，而是让颜色在不同背景、不同缩放、不同设备下都不突兀。比如浅灰底色配深蓝 hover 在 Retina 屏上看可能太暗，而同一组色值在 Windows 高对比度模式下直接不可见 —— 这些得靠实际设备测试，不是查文档能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
