纯CSS无法实现鼠标坐标驱动的边框实时变色，必须用JavaScript配合mousemove+linear-gradient模拟或border-image方案；:hover仅支持元素级悬停，不支持坐标感知，且tr/td:hover在合并单元格和border-collapse下行为异常。
纯 CSS 无法实现“边框颜色随鼠标在表格内移动而实时变化”的效果；:hover 只能响应元素整体悬停，不是坐标驱动的跟随式变色。真要实现“鼠标在哪、边框哪段变色”，必须用 JavaScript 配合 mousemove + linear-gradient 模拟，或用 border-image 做可控渐变边框。
为什么 tr:hover 或 td:hover 不行
它们只在鼠标进入/离开整个行或单元格时触发一次样式切换，无法感知鼠标在元素内部的 X/Y 位置。常见错误是试图给 td 加 :hover 并期望整行边框联动——这会导致：鼠标只移到某个 td 时，其他 td 不响应；合并单元格（rowspan/colspan）下行为错乱；悬停区域因 padding/border 不连续而“断开”。
-
tr:hover只能整行统一变色，不是“跟随” -
td:hover是离散触发，视觉割裂，且不适用于border-collapse: collapse场景 - 浏览器不支持基于坐标的伪类（如
:hover-at(x,y)），不存在这样的 CSS 标准
用 mousemove + linear-gradient 模拟动态边框
核心思路是放弃真实 border，改用 background + background-clip: padding-box 覆盖在元素内边距区域，再通过 JS 实时计算鼠标相对位置生成渐变色。
- 监听
table或tbody的mousemove，避免给每行单独绑事件 - 缓存
getBoundingClientRect()结果，不要在每次mousemove中重复调用 - 用
requestAnimationFrame包裹颜色更新，防止高频触发丢帧 - 移动端需降级为
touchmove，并加e.preventDefault()防止滚动干扰 - 示例关键代码：
const table = document.querySelector('table'); let rect = table.getBoundingClientRect(); table.addEventListener('mousemove', (e) => { const x = e.clientX - rect.left; const percent = Math.max(0, Math.min(100, (x / rect.width) * 100)); table.style.background = `linear-gradient(90deg, #00f ${percent}%, #f00 ${percent}%)`; table.style.backgroundClip = 'padding-box'; table.style.border = '2px solid transparent'; });
border-image 是更轻量的替代方案
如果不需要像素级实时跟随，而是想要一种平滑、可动画、性能好的“流动边框”效果，border-image 是原生支持的方案，兼容性到 IE11+，且无需 JS。
立即学习“前端免费学习笔记（深入）”；
- 用
linear-gradient作为border-image-source，配合border-image-slice: 1 - 通过 CSS 动画控制渐变色位置（如
background-position类比），实现“流动感” - 注意
border-width必须显式设置，否则border-image不生效 - 示例：
table { border: 4px solid; border-image: linear-gradient(90deg, #007bff, #ff6b6b) 1; animation: borderFlow 3s infinite linear; } @keyframes borderFlow { to { border-image-source: linear-gradient(90deg, #ff6b6b, #007bff); } }
真正“跟随鼠标坐标变色”的边框，本质是视觉模拟，不是真实边框属性的实时更新。JS 计算 + gradient 背景是最接近需求的解法，但要注意移动端 touch 事件处理和重绘性能；border-image 更适合追求简洁、稳定、可动画的场景——别指望它响应鼠标精确位置，那是设计定位差异，不是 bug。
