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