tr:hover不生效主因是td/th背景覆盖或兼容性问题：需清除子元素背景、检查CSS优先级、避免IE8等旧浏览器，并注意移动端hover不可靠，应辅以active状态或JS处理。
tr:hover 为什么有时不生效
直接写 tr:hover { background: #eee; } 却没反应，大概率是表格里有 td 或 th 自己设置了 background，把 tr 的背景盖掉了。CSS 中子元素的背景会覆盖父元素背景，tr 的悬停样式不是“穿透式”的。
- 检查是否对
td/th设置了固定background-color（比如background: white），有就删掉或改成transparent - 确保没有更具体的规则（如
.table-striped tbody tr:hover）被意外覆盖，用浏览器开发者工具看“Computed”面板确认生效样式 - IE8 及更早版本不支持
tr:hover，如果需兼容，得用 JS 模拟，但现代项目基本不用考虑
如何让 hover 效果更自然
生硬的背景色切换体验差，加过渡动画能明显提升交互质感，但要注意只对可动画属性加 transition。
- 只给
tr加transition: background-color 0.2s ease;，别写成all 0.2s，避免意外触发重排 - 推荐用
rgba()或 HSL 颜色，方便控制透明度和亮度变化，例如：tr:hover { background-color: rgba(0, 120, 215, 0.08); } - 如果表格用了斑马纹（
tbody tr:nth-child(even)），hover 时建议统一覆盖，否则偶数行/奇数行悬停色不一致
移动端 touch 设备下 hover 失效怎么办
手机和平板没有“鼠标悬浮”概念，:hover 在触摸屏上默认只在点击后短暂触发（且仅 Safari 等部分浏览器支持），不能依赖它做核心交互反馈。
- 不要用
tr:hover替代可点击提示——比如用户需要知道这行能点开详情，应额外加图标或文字标识 - 若必须视觉反馈，可用
:active搭配 JS 添加临时 class，例如点击时加is-active并设 150ms 后自动移除 - CSS 中可写
@media (hover: hover) { tr:hover { ... } }来条件启用 hover 样式，避免在纯触屏设备上浪费渲染
与 JavaScript 事件共存时的常见冲突
当某行同时绑了 click 和 tr:hover，用户快速点击可能看不到 hover 效果，因为鼠标移入→移出→点击太快，或者点击后焦点/状态干扰了伪类。
- 避免在
tr上同时监听mouseenter/mouseleave并手动改 class，会和:hover竞态 - 如果要用 JS 控制高亮（比如多选行），建议统一用 class（如
is-selected）管理，:hover只负责临时悬停，两者互不覆盖 - 注意
tr若设了pointer-events: none（比如为了透传点击到内部按钮），hover 就完全失效，得改用td或容器包裹
实际项目里最常被忽略的是 td 的背景覆盖问题，以及没意识到 :hover 在触摸设备上的不可靠性——这两点比怎么写动画重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
