如何实现仅鼠标悬停元素时显示跟随指针的圆形光标效果

原代码仅针对单个class为button的元素绑定事件，要适配页面所有链接元素，可以按如下方式改造，逻辑更简洁、性能更好：

核心改造点 #

• 全局只创建1个圆形标识DOM节点，避免给每个链接重复嵌入冗余节点
• 遍历所有链接元素统一绑定事件，不用逐个手动加标记
• 用原生mouseenter/mouseleave事件替代手动坐标边界判断，逻辑更稳定
• 给圆形节点加事件穿透属性，避免拦截鼠标事件导致交互异常

完整实现代码 #

HTML部分 #

页面里的链接正常书写即可，不需要给每个链接额外加子元素：

<a href="/">首页</a>
<a href="/about">关于我们</a>
<a href="/archives">文章归档</a>

CSS部分 #

body {
  margin: 20px;
  padding: 20px;
}

/* 所有链接设为相对定位，作为圆形的定位父容器 */
a {
  padding: 12px 24px;
  border: 1px solid #ccc;
  color: #165DFF;
  display: inline-block;
  position: relative;
  margin: 8px;
  text-decoration: none;
}

/* 跟随鼠标的圆形样式 */
.hover-circle {
  position: absolute;
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border: 2px solid #f53f3f;
  /* 关键属性：让圆形不拦截鼠标事件 */
  pointer-events: none;
}

.hover-circle.in {
  display: block;
}

JavaScript部分 #

// 创建全局唯一的圆形跟随节点
const followCircle = document.createElement('span')
followCircle.className = 'hover-circle'

// 获取页面所有链接元素，批量绑定事件
document.querySelectorAll('a').forEach(linkEl => {
  // 鼠标移入链接：挂载圆形节点、显示效果
  linkEl.addEventListener('mouseenter', () => {
    linkEl.appendChild(followCircle)
    followCircle.classList.add('in')
  })

  // 鼠标在链接内移动：实时更新圆形位置
  linkEl.addEventListener('mousemove', e => {
    const linkRect = linkEl.getBoundingClientRect()
    followCircle.style.top = `${e.clientY - linkRect.top}px`
    followCircle.style.left = `${e.clientX - linkRect.left}px`
  })

  // 鼠标移出链接：隐藏圆形
  linkEl.addEventListener('mouseleave', () => {
    followCircle.classList.remove('in')
  })
})

自定义调整说明 #

• 如果不需要给所有链接加效果，只需要修改querySelectorAll的选择器即可，比如传a.custom-hover就只会给带custom-hover类的链接生效
• 可以修改.hover-circle的宽高、边框颜色、透明度等属性，调整圆形的视觉样式
• 如果需要加圆形缩放、淡入淡出的过渡效果，直接给.hover-circle加transition属性即可

内容的提问来源于stack exchange，提问作者Dragan Petrovic FSD