:hover 可实现边框悬停变色，纯 CSS、零 JS、兼容 IE9+；需设初始 border 和 transition；“跟随”效果需 mousemove + linear-gradient 或 border-image。
用 :hover 实现最简边框随鼠标变色
不需要 JavaScript，纯 CSS 就能搞定。关键在于利用元素自身的 :hover 伪类控制 border-color。浏览器原生支持，兼容性好（IE9+），性能零开销。
常见错误是给父容器加 :hover 却忘了子元素是否继承或响应——:hover 只作用于被鼠标直接悬停的元素本身，不“穿透”也不“广播”。
- 确保目标元素有明确的
border（哪怕初始是transparent） - 避免在
border上使用transition时漏写单位（如写成border-color 0.3s而非border-color 0.3s ease） - 若元素无内容或
height/width为 0，悬停可能无效——需设min-width或padding
button {
border: 2px solid #ccc;
transition: border-color 0.2s;
}
button:hover {
border-color: #007bff;
}需要“跟随”效果？得用 mousemove + 动态计算
如果需求是边框颜色随鼠标在元素内移动而实时渐变（比如从左到右由红变蓝），:hover 不够用，必须监听 mousemove 事件，根据 clientX 和元素位置算出归一化比例，再设置 border-color 或背景渐变模拟边框。
注意：直接频繁改 border-color 值不会产生“跟随感”，真正实现要靠 linear-gradient 配合 background 和 background-clip: padding-box 模拟可动画的边框。
立即学习“前端免费学习笔记（深入）”；
- 别用
getBoundingClientRect()在每次mousemove中反复调用——缓存一次，只更新偏移量 - 用
requestAnimationFrame包裹颜色更新逻辑，避免丢帧 - 移动端无
mousemove，需降级为touchmove并阻止默认行为防滚动干扰
const el = document.querySelector('.track-border');
el.addEventListener('mousemove', (e) => {
const rect = el.getBoundingClientRect();
const x = e.clientX - rect.left;
const percent = Math.max(0, Math.min(100, (x / rect.width) * 100));
el.style.background = `linear-gradient(90deg, #f00 ${percent}%, #00f ${percent}%)`;
el.style.backgroundClip = 'padding-box';
el.style.border = '2px solid transparent';
});
border-image 是更接近“跟随”的原生方案
HTML5 的 border-image 支持用渐变、图片甚至 SVG 作为边框图案，配合 border-image-slice 和 border-image-repeat，能做出鼠标移动时边框颜色“流动”的视觉效果——虽然不是真·实时响应坐标，但动画可控、性能好、代码简洁。
限制在于：IE 不支持 border-image 的渐变值（IE11 只支持图片），且 Safari 对 border-image 的 linear-gradient 渲染偶有偏移。
- 必须显式声明
border-style（如solid），否则border-image不生效 - 渐变方向要和边框走向匹配：上/下边框用
to right，左/右边框用to bottom - 用
border-image-slice: 1确保渐变完整铺满，避免被裁切
.animated-border {
border: 6px solid;
border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1) 1;
}
为什么不用 outline 替代 border？
有人想用 outline 配合 :hover 实现类似效果，但 outline 无法设置单边颜色、不占布局空间、不支持圆角衔接，且在 focus 场景中会被屏幕阅读器识别为焦点环——容易干扰可访问性。
更关键的是：outline 不支持 transition（Chrome/Firefox 仅部分支持 outline-color 过渡，Safari 完全不支持），所以无法平滑变色。
- 若需焦点态边框，请坚持用
border+:focus-visible - 避免同时设置
border和outline，防止视觉重叠或意外覆盖 - 用
box-shadow模拟发光边框比outline更灵活、可过渡、可圆角
实际项目里，“跟随”往往只是视觉错觉。先确认设计稿是否真需像素级坐标响应——多数情况用 :hover 或 border-image 就已足够，硬上 mousemove 计算反而增加维护成本和兼容风险。
