如何用JavaScript实现多个按钮悬停时动画跟随光标效果

优化CSS定位逻辑 #

首先需要给.btn新增相对定位属性，避免伪元素的绝对定位参照根节点，导致位置偏移，以下是完整可直接使用的CSS代码，额外补充了交互优化项：

.btn {
  position: relative; /* 必须新增：让伪元素相对按钮本身定位 */
  display: block;
  width: 150px;
  height: 50px;
  background: #666;
  margin: 10px;
  overflow: hidden; /* 可选：避免悬停效果超出按钮边界 */
}

.btn::before {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%); /* 可选：让圆点中心对齐光标位置 */
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
  border-radius: 50%; /* 可选：改成圆形效果更自然 */
  background: #ff0000;
  transition: all .1s ease; /* 可选：加过渡让动画更流畅 */
}

.btn:hover::before {
  width: 30px;
  height: 30px;
}

修改JavaScript遍历逻辑 #

将单个元素选择改为批量选择，遍历所有按钮绑定事件，事件触发时针对当前触发的按钮计算坐标：

// 选中页面中所有class为btn的元素
const btns = document.querySelectorAll('.btn');

// 遍历每个按钮单独绑定鼠标移动事件
btns.forEach(btn => {
  btn.onmousemove = function(e) {
    // offsetX、offsetY可直接获取光标相对于当前元素的坐标，无需手动计算
    btn.style.setProperty('--x', e.offsetX + 'px')
    btn.style.setProperty('--y', e.offsetY + 'px')
  }
})

适配说明 #

原代码仅通过querySelector选中了第一个.btn元素，因此只有第一个按钮生效。替换为querySelectorAll获取所有按钮后，遍历为每个按钮单独绑定事件，即可实现所有按钮都支持光标跟随动画。

内容的提问来源于stack exchange，提问作者Agnes Tom