:hover 改 border-color 必须先设 border-width 和 border-style，否则因默认 border-style: none 导致边框跳动；配合 border-collapse 时优先作用于 tr 并设 transparent 边框；移动端需用 js 或媒体查询降级处理。
直接用 :hover 改 border-color 就行，但必须先设好 border-width 和 border-style，否则边框会“抖一下”——这是 90% 的人踩过的坑。
为什么悬停时边框会跳动？
浏览器默认 border-style 是 none，如果你只写 border-color: #ccc，实际等价于 border: medium none #ccc，宽度为 0。悬停时突然变成 2px solid #007bff，宽度从 0 跳到 2px，视觉上就是抖动。
- 必须显式声明初始边框：比如
border: 2px solid transparent或border: 2px solid #ddd - 不要只写
border-color，那会继承默认的medium none，不可预测 - 如果表格用了
border-collapse: collapse，:hover对td或th生效时，相邻单元格边框可能被合并覆盖，建议优先作用于tr
给整行加悬停变色边框（推荐）
比单个单元格更稳定，且符合用户对“行操作”的直觉。关键是避免边框叠加导致粗细不一致。
- 给
tr设border: 2px solid transparent，再用tr:hover改border-color - 配合
border-collapse: collapse时，tr的 border 实际只显示在上下边缘；若需四边都显，得关掉collapse改用separate，并设border-spacing: 0 - 加过渡动画：写
transition: border-color 0.2s ease，别写transition: all，否则 padding/margin 变化也会触发动画
给单个单元格悬停变色（需注意边界）
适合强调特定数据点，但要注意边框冲突和视觉断裂。
- 对
td, th设置border: 1px solid #eee，悬停时改border-color: #007bff - 如果用了
border-collapse: collapse，悬停一个td会让它上下左右的边框都变色——因为边框是共享的，这有时是优点，有时是干扰 - 想只高亮当前单元格“独立边框”，就得用
border-collapse: separate+border-spacing: 0，再给td:hover加outline或box-shadow模拟，避免影响布局
移动端没 hover 怎么办？
触摸设备没有持续 hover 状态，:hover 在 iOS/Android 上仅在点击瞬间触发，体验断层。
- 别依赖纯
:hover做关键交互，比如“点击后保持高亮”必须用 JS 切换 class - 可用
@media (hover: hover) and (pointer: fine)区分精细指针设备，对触屏降级为:active或点击态 - 真要模拟 hover 效果，得监听
touchstart/touchend，但注意touchstart后立即触发，没有延迟，容易误触
真正麻烦的不是怎么写 :hover，而是初始边框声明是否完整、border-collapse 是否与目标效果兼容、以及移动端是否被悄悄忽略——这三处出错，样式看起来就“不稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
