表格行悬停变色失效的常见原因包括：tr未设初始background-color、table有全局背景干扰、transition未写在非hover规则中或属性名不匹配；应将:hover写在tr上，用transition: background-color精确控制，颜色值统一格式，并通过cursor: pointer激活移动端伪类。
表格行悬停变色为什么加了 transition 没反应
常见原因是直接给 <tr> 设置 <code>background-color 但没指定初始色，或者父元素（如 <table>）有 <code>background-color 覆盖了行背景。浏览器对 <tr> 的背景渲染依赖于 <code>border-collapse 和是否设置了明确的背景色。
- 必须给
<tr> 显式设置一个初始 <code>background-color（哪怕只是transparent） - 确保
<table> 没有设置全局背景色干扰行级样式 <li> <code>transition必须写在非 hover 状态的规则里，且属性名要和 hover 中变化的属性完全一致 - 不要写成
td:hover后再设tr背景——无法触发父级样式变更 - 如果用了
border-collapse: collapse，记得<tr> 的背景会正常铺满整行；若为 <code>separate，可能需要额外处理间隙transition 怎么写才真正平滑
只写
transition: all 0.2s容易引发意外动画（比如边框、阴影等隐式变化），应锁定具体属性。同时，background-color动画依赖颜色空间插值，从transparent到纯色可能不够自然，建议统一用 rgba 或十六进制。- 正确写法：
tr { background-color: #fff; transition: background-color 0.25s ease; } - 避免用
all，尤其在表格中可能触发重排或闪烁 - 颜色值保持同类型：都用
#f9f9f9或都用rgba(249, 249, 249, 1)，混用可能导致过渡卡顿 - 如果使用 CSS 变量控制主题色，确保变量在 :hover 前已被计算（即不要在 :hover 里动态 calc 变量）
移动端点击无 hover 效果怎么办
部分 iOS/Android 浏览器在非可点击元素上不触发
:hover，<tr> 默认不可聚焦。解决方案不是加 <code>onclick=""，而是用:active补充点击态，并确保表格容器有cursor: pointer触发伪类激活。- 添加
tr { cursor: pointer; }提升触摸设备识别度 - 补充
tr:active { background-color: #e6f2ff; }作为点击反馈 - 如需全平台一致，可加
@media (hover: hover) { ... }区分悬停能力，但多数场景直接共用 hover + active 更轻量
<tr> 必须有初始背景、<code>transition属性名必须精确匹配、颜色格式别混用、移动端得靠cursor激活伪类——漏掉任一环，看起来就像“动效失效”了。 - 正确写法：
:hover 该写在 tr 上还是 td 上
写在 <tr> 上更合理，语义清晰、维护简单、避免重复声明。但要注意：IE 低版本不支持 <code><tr>:hover，不过现代项目基本无需兼容；若需兼容极旧环境，可改用 JavaScript 或退回到 <code><td>:hover + 同步兄弟元素，但会增加复杂度。
<ul>
<li>推荐写法：<code>tr:hover { background-color: #f0f8ff; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
