tbody tr:hover 才是真正生效的选择器，因表格行实际在 tbody 内；需配合 td,th{background-color:inherit} 防被覆盖；移动端慎用 hover，建议用@media(hover:hover)或 js 模拟；注意 border-collapse 和 transition 配合。
直接写 tr:hover 大概率没反应——不是语法错，而是被结构、样式或浏览器限制拦住了。
tbody tr:hover 才是真正生效的选择器
表格默认有 thead、tbody、tfoot 隐式或显式包裹，但很多 HTML 没写 tbody，浏览器会自动补上。问题在于：tr:hover 只匹配顶层 tr，而实际数据行都在 tbody 里。
- ✅ 正确写法：
tbody tr:hover { background-color: #f0f9ff; } - ❌ 错误写法：
tr:hover（可能只命中表头或脚注行） - 若需同时高亮表头行，单独加：
thead tr:hover - 用开发者工具检查元素结构，确认
tr确实是tbody的直接子元素
td/th 必须继承背景色，否则 hover 看不见
tr 设置了背景色，但 td 和 th 默认有独立背景（通常是透明或白色），会盖住 tr 的颜色。
- 必须显式声明：
td, th { background-color: inherit; } - 如果某处写了
td { background: white !important }，inherit就失效，得改掉或提高优先级 - Safari 对
inherit支持较严格，不设这句在 Safari 下常完全无反应
移动端点击后 hover 不稳定？别依赖它
iOS 和 Android 浏览器对 :hover 的支持是“有条件触发”：首次触摸后短暂激活，之后可能不维持。这不是 bug，是规范行为。
- 不要用
tr:hover做关键操作反馈（比如“点这里删除”） - 替代方案：
@media (hover: hover) { tbody tr:hover { ... } }，仅在支持 hover 的设备启用 - 更可靠做法：用 JS 监听
touchstart或click，临时加is-hovered类，300ms 后移除
border-collapse 和 transition 要小心配
加了 transition: background-color .2s 是好习惯，但和边框配合时容易出视觉抖动。
- 务必设
table { border-collapse: collapse; }，否则tr:hover可能导致边框双倍显示或跳动 - 避免对
padding、height或border做 hover 过渡——触发重排，卡顿明显 - 如果表格用了
box-shadow模拟分隔线，hover 时别同时改shadow和background，叠加动画易糊
真正麻烦的不是写那行 tr:hover，而是排查它为什么被 tbody 结构挡掉、被 td 背景色盖住、被移动端忽略，或者被一个没意识到的 !important 锁死。这些点漏掉任何一个，效果就“看起来没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
