不是必须加transition，但不加就无平滑效果；必须将transition写在常态样式中、作用于td/th而非tr，且需统一颜色格式、显式设初始背景色。
表格行悬停变色必须加 transition 吗？
不是“必须”，但不加就毫无过渡效果——:hover 会瞬间切换背景色，视觉生硬，用户感知像卡顿。加了 transition 才算真正实现“平滑变色”。关键不是加不加，而是加在哪、加给谁。
常见错误是把 transition 写在 <tr> 上却忘了给 <td> 和 <th> 显式定义背景（因为 <tr> 本身不渲染背景，实际生效的是单元格）。正确做法是：把 transition 和 :hover 都作用于 <td> / <th>，而非 <tr>。
-
transition必须写在“常态样式”里（比如.table-row td），不能只写在:hover中 - 推荐只过渡
background-color，避免用all——否则字体大小、边框等意外属性也会动，可能触发重排 - 时间建议设为
0.2s～0.3s：短于0.15s感觉不到动画，长于0.4s显拖沓
整列悬停变色为什么不能直接用 <col>？
<col> 是纯语义占位符，浏览器不把它当可渲染元素——它没有盒模型、不响应 :hover、也不能设 background-color 或 transition。所有试图给 <col> 加样式的尝试都会静默失效。
真正可行的方案是：为每列单元格统一加类名（比如第一列所有 <td> 和 <th> 都加 col-1），再用 CSS 控制该类的悬停态：
立即学习“前端免费学习笔记（深入）”；
.col-1 { transition: background-color 0.25s ease; }
.col-1:hover { background-color: #f0f9ff; }
- 类名必须手动加到每个
<td>和<th>，不能只加在<col>上 - 如果表格动态生成，JS 里得遍历每行并按列索引赋类，别漏掉
<thead>里的<th> - 注意
z-index和层叠上下文：若表格用了position: relative或transform，可能遮挡悬停效果
transition 触发后颜色没变？检查这三处
最常卡在这几个地方，而不是代码写错：
- 初始和目标
background-color值类型不一致：比如一个是rgba(0,0,0,0.1)，另一个是#eee，浏览器无法插值过渡——统一用rgb()或都用十六进制 -
:hover选择器优先级不够：父容器有!important覆盖，或用了内联样式（style="background: white"），后者会压倒 CSS 中的:hover - 元素本身没设置
background-color初始值：比如只写了color，background-color是 transparent，悬停时设成#ddd会闪一下再过渡——务必显式声明初始背景
移动端表格悬停失效怎么办？
手机和平板没有 hover 状态，:hover 在触摸设备上基本不可靠（iOS Safari 甚至默认禁用）。别指望靠 :hover + transition 在移动端生效。
替代方案只有两个现实选择：
- 改用点击高亮：用 JS 监听
touchstart，给当前行加active类，CSS 里对.active设transition——注意要加touchend清除，否则高亮残留 - 完全放弃悬停，改用
@media (hover: hover)媒体查询做条件加载：只在支持 hover 的设备上启用:hover样式，其他设备走静态样式
真正麻烦的不是怎么写，而是记住：悬停动画本质是桌面端交互范式，强行移植到触控屏只会带来兼容性黑洞。
