加 transition 卡顿是因过渡了触发重排/重绘的属性；应仅过渡 background-color 等安全属性，写在常态规则中，确保 dom 结构符合 .table.table-hover 要求，并注意触屏设备 hover 限制。
为什么加了 transition 还是卡顿或跳动
不是 transition 写错了，而是动了不该动的属性。浏览器对 background-color 的过渡是 GPU 友好的，但一旦混入 padding、border、outline 或 box-shadow，就会触发 layout（重排）或 paint（重绘），尤其在表格这种密集 DOM 结构里，卡顿会立刻暴露。
常见错误写法：transition: all 0.2s ease——它会让后续任何样式变更都强制过渡，比如 JS 动态加 class 改了 padding，整行就“弹一下”。
- 只过渡安全属性：
transition: background-color 0.2s ease或transition: background-color 0.2s ease, color 0.2s ease - 避免在
:hover规则里写transition，必须写在常态规则（如.table-hover tbody tr）中，否则鼠标移出时无动画 - 如果用了渐变背景（
background: linear-gradient(...)），hover 时也得用同类型渐变，否则过渡会中断回退到纯色 - 移动端可加媒体查询控制：
@media (hover: hover) { .table-hover tbody tr { transition: background-color 0.2s ease; } }，避免触屏设备白跑渲染
.table-hover 类没生效？先查 DOM 结构和类名组合
Bootstrap 5 的 .table-hover 样式只作用于 tbody tr:hover，且前提是表格同时有 .table 和 .table-hover 两个类。漏掉任何一个，CSS 规则根本不会匹配。
- 错误写法：
<table class="table-hover"> —— 缺 <code>.table，无效 - 正确写法：
<table class="table table-hover"> <li>检查真实 DOM：Vue/React 中若用 Fragment 或动态生成 <code>tr，可能没包裹tbody，浏览器虽会自动补，但 Bootstrap 的选择器不认“隐式 tbody”，必须显式写出<tbody><tr>...</tr></tbody> - 自定义主题或精简 CSS 时，确认
tables模块已引入，否则.table-hover规则压根不存在 - 必须加：
.table-hover tbody tr:hover { background-color: #e9f7fe !important; } - 别只写
tr:hover—— 它没作用域，可能误改其他表格甚至表头；限定在tbody内是底线 - 如果项目用 Sass，改变量
$table-hover-bg更干净，但仅限编译时生效；CDN 引入的 CSS 无法运行时覆盖 - 多主题场景下，建议用命名空间类，比如
.my-table-hover tbody tr:hover，避免全局污染 - 真要支持触摸反馈，得用 JS 补位：监听
touchstart给当前tr加临时 class（如touched），再用touchend清除；但注意加 150ms 延迟移除，防止点击按钮时高亮残留 - 别用
mouseover/mouseout—— 手机上基本不触发 - 更轻量的方案是放弃“悬停”，改用
:focus-within或点击后加.active类，配合键盘导航兼容性更好 - 某些框架（如 BootstrapVue）已内置 touch fallback，优先查文档而非自己造轮子
自定义悬停色总被覆盖？权重和 !important 的取舍
Bootstrap 5.3+ 的源码中，.table-hover tbody tr:hover 规则自带 !important，所以你写 .table-hover tbody tr:hover { background-color: #e9f7fe; } 不加 !important 就会被覆盖。
触屏设备上 hover 失效，不是 bug 是规范
iOS 和 Android 浏览器默认不触发 :hover，这是为节省资源做的主动限制。别指望加个 pointer-events: auto 就能解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
