最轻量且真正跟随鼠标的方案是用JavaScript动态计算鼠标坐标并存入CSS自定义属性，再通过radial-gradient渲染光斑；纯CSS无法获取clientX/clientY，:hover仅能触发整体状态切换，无法实现精确定位的渐变高亮效果。
直接用 background-image 配合 radial-gradient + JavaScript 动态计算坐标，是目前最轻量、兼容性最好、且真正“跟随鼠标”的方案。纯 CSS 无法读取鼠标坐标，所以必须 JS 参与。
为什么不能只用 :hover 实现“跟随”效果
:hover 只能触发整体状态切换，比如变色、缩放、阴影，但它不知道鼠标在按钮内的具体 x/y 位置。所谓“跟随高亮”，本质是渲染一个以鼠标为中心的渐变光斑，这需要实时坐标——CSS 没有变量能绑定鼠标的 clientX/clientY。
- 试图用
transition+transform模拟？只能做固定方向位移，不是跟随 - 用
clip-path或mask配合calc()？CSS 里没有event.clientX这种东西 - 伪元素 +
position: absolute？没 JS 定位就只能固定在左上角
核心实现：用 JS 更新自定义属性，CSS 读取并渲染
把鼠标坐标存进按钮的 style 里作为 CSS 自定义属性，再用 radial-gradient 基于它画光斑。这样既避免频繁重排，又不依赖第三方库。
- 给按钮加
data-hover="true"标记，方便统一监听 - 监听
mousemove，计算相对于按钮左上角的x/y（用evt.offsetX/evt.offsetY） - 写入
style：style="--x: ${x}px; --y: ${y}px;" - CSS 中用
background-image: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,0.2) 0%, transparent 50%);
示例片段：
立即学习“前端免费学习笔记（深入）”；
button[data-hover] {
background-color: #3b82f6;
color: white;
border: none;
padding: 12px 24px;
position: relative;
overflow: hidden;
}
button[data-hover]::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: radial-gradient(
circle at var(--x, 50%) var(--y, 50%),
rgba(255, 255, 255, 0.2) 0%,
transparent 60%
);
opacity: 0;
transition: opacity 0.15s;
}
button[data-hover]:hover::before {
opacity: 1;
}
容易忽略的细节和坑
这个效果看着简单，但有三个地方极易出错：
- 没加
overflow: hidden→ 光斑会溢出按钮边缘，尤其圆角按钮时特别明显 - 没设
position: relative→::before会相对 body 定位，光斑飘走 - 移动端完全失效 —— 触摸设备无
mousemove，也无:hover状态；真机测试时要 fallback 到:active或禁用该效果 - 如果按钮是 disabled 状态，
pointer-events: none会让事件监听失效，需额外判断!this.disabled
真正难的不是写出光斑，而是让光斑稳稳待在按钮里、不抖动、不卡顿、不干扰点击逻辑——这些都藏在 position、overflow 和事件条件判断里。
