表格 hover 变色不生效是因 border-collapse: collapse 导致边框合并，直接改 border 无效；推荐用 box-shadow 模拟外边框并加 transition 实现平滑变色，兼顾兼容性与动画效果。
表格边框 hover 变色为什么直接写 border 不生效
因为 HTML 表格默认启用 border-collapse: collapse（即使没显式声明），此时单元格边框会合并成一条线，:hover 作用在 <table> 或 <code><td> 上时，修改 <code>border 只会改变「自身边框」，而合并后的外边框实际由最外层单元格的边框共同构成，视觉上不连贯、易断开。
真正起作用的是给整个表格加一个「包裹性外边框」，再控制它的颜色变化：
- 用
outline：简单但不支持圆角、无法精准控制粗细和位置 - 用
box-shadow模拟边框：推荐，灵活、可动画、不影响布局 - 改用
border-collapse: separate+border-spacing: 0：能恢复独立边框逻辑，但需重置所有单元格边框，兼容性略差
用 box-shadow 实现平滑外边框变色（推荐）
这是最稳妥的做法，不干扰表格结构，支持过渡动画，且对 colspan/rowspan 完全友好：
table {
border-collapse: collapse;
transition: box-shadow 0.2s ease;
}
table:hover {
box-shadow: 0 0 0 2px #4a90e2;
}
说明：
-
0 0 0 2px中最后一个值是「扩展半径」，等效于外描边宽度 - 如果已有其他
box-shadow，记得保留原有部分，用逗号拼接 - 要兼容旧版 Safari，可加
-webkit-box-shadow - 避免用
outline，它绕过 box model，焦点样式冲突时容易错位
想让单个单元格 hover 时显示局部边框怎么办
这时不能依赖表格合并逻辑，得让每个 <td> / <code><th> 自带独立边框：
<pre class="brush:php;toolbar:false;">table {
border-collapse: separate;
border-spacing: 0;
}
td, th {
border: 1px solid #ddd;
transition: border-color 0.15s;
}
td:hover, th:hover {
border-color: #4a90e2;
}</pre>
<p>注意点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<code>border-spacing: 0 必须设，否则单元格之间会有白缝
border-collapse: separate 下的 border-spacing 动画，如需兼容请放弃过渡效果移动端 touch 设备上 hover 失效怎么办
iPhone 和 Android 浏览器默认不触发 :hover（除非用户点击后短暂激活），纯 CSS 方案不可靠。真实场景中应补充 JS 逻辑：
document.querySelectorAll('table').forEach(table => {
table.addEventListener('touchstart', () => {
table.classList.add('hover-active');
});
table.addEventListener('touchend', () => {
setTimeout(() => table.classList.remove('hover-active'), 300);
});
});
对应 CSS：
table.hover-active {
box-shadow: 0 0 0 2px #4a90e2;
}
关键细节：
- 不用
ontouchstart直接写内联，避免污染 HTML - 加
setTimeout是为了留出视觉反馈时间，不然 touchend 立即移除会闪一下 - 这个 class 名不要和已有的框架类名冲突（比如 Bootstrap 的
hover）
表格边框 hover 变色看着简单，但真正在意细节的人会卡在合并边框逻辑、移动端适配、以及过渡是否自然这三个地方。动手前先想清楚：你要变的是「整个表的轮廓」，还是「某个格子的四边」，选错方案后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
