跟随光标移动的元素悬停在按钮上时如何触发onhover事件

CSS 原生的:hover伪类仅响应系统原生鼠标指针的悬停行为，无法直接检测自定义跟随光标元素和其他DOM元素的位置重叠，这一需求需要借助JavaScript实现。

具体实现方案 #

• 先给元素加标识：给跟随光标元素加专属ID比如custom-cursor，给需要检测悬停的所有按钮加统一类名比如target-btn
• 写入重叠检测逻辑：在你更新跟随光标位置的函数中，追加位置判断逻辑，示例代码如下：

// 重叠检测工具函数
function checkOverlap(cursorEl, targetEls) {
  const cursorRect = cursorEl.getBoundingClientRect()
  targetEls.forEach(btn => {
    const btnRect = btn.getBoundingClientRect()
    const isOver = !(
      cursorRect.right < btnRect.left ||
      cursorRect.left > btnRect.right ||
      cursorRect.bottom < btnRect.top ||
      cursorRect.top > btnRect.bottom
    )
    // 重叠时加自定义类，离开时移除
    btn.classList.toggle('custom-hover', isOver)
    // 如果需要触发原生mouseenter/mouseleave事件可以加下面的代码
    if (isOver) {
      btn.dispatchEvent(new Event('mouseenter'))
    } else {
      btn.dispatchEvent(new Event('mouseleave'))
    }
  })
}

// 调用示例，在光标移动的回调里执行即可
const customCursor = document.querySelector('#custom-cursor')
const targetBtns = document.querySelectorAll('.target-btn')
// 可以加节流优化性能，避免高频调用
window.addEventListener('mousemove', () => {
  // 你原有的更新跟随光标位置的代码
  // ...
  // 调用检测函数
  checkOverlap(customCursor, targetBtns)
})

• 最后在CSS中定义自定义悬停类的样式即可，可和原生:hover效果保持一致：

.target-btn:hover,
.target-btn.custom-hover {
  /* 自定义悬停样式 */
  background-color: #3b82f6;
  color: #ffffff;
  transform: scale(1.05);
}

性能优化提示 #

如果页面内需要检测的按钮数量较多，可以给mousemove回调加节流处理，控制检测频率为每16ms一次（对应60帧刷新率），避免不必要的性能损耗。

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