如何在HTML按钮上添加跟随鼠标位置的微弱高亮效果-html教程-PHP中文网

最轻量且真正跟随鼠标的方案是用javascript动态计算鼠标坐标并存入css自定义属性，再通过radial-gradient渲染光斑；纯css无法获取clientx/clienty，:hover仅能触发整体状态切换，无法实现精确定位的渐变高亮效果。

如何在html按钮上添加跟随鼠标位置的微弱高亮效果

直接用 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 基于它画光斑。这样既避免频繁重排，又不依赖第三方库。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

给按钮加 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;
}