jQuery实现自定义圆形鼠标指针后:hover伪类失效如何解决？

问题原因 #

你遇到的:hover失效本质是两个原因导致的：

• 自定义光标元素#circularcursor设置了z-index: 2，层级高于所有页面内容，会拦截全部鼠标事件，下层元素无法接收到hover触发信号
• 你只是通过cursor: none隐藏了系统光标的视觉表现，系统本身的鼠标坐标检测、事件触发逻辑完全正常，不需要额外做坐标检测来模拟hover

最简修复方案 #

只需要给自定义光标元素加一个pointer-events: none属性，让它不响应任何鼠标事件，所有交互直接透传给下层元素，原生:hover就会恢复正常，哪怕鼠标静止也能正常触发：

#circularcursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
  transition: transform .2s;
  /* 新增这一行 */
  pointer-events: none;
}

扩展：自定义光标悬停效果 #

如果你需要让自定义光标本身在碰到可交互元素时也同步变化（比如放大、变色），可以在现有mousemove事件里补充元素检测逻辑：

$(document).ready(function() {
  const $cursor = $('#circularcursor');
  $(document).on('mousemove', function(e) {
    $cursor.css({
      left: e.pageX,
      top: e.pageY
    });
    // 检测当前鼠标坐标下的元素
    const target = document.elementFromPoint(e.clientX, e.clientY);
    // 匹配需要触发光标悬停效果的元素，可自行扩展选择器
    if (target.closest('#cta_btn') || target.tagName === 'A') {
      $cursor.addClass('cursor-hover');
    } else {
      $cursor.removeClass('cursor-hover');
    }
  });
  // 可选：鼠标离开页面时隐藏自定义光标
  $(document).on('mouseleave', () => $cursor.hide());
  $(document).on('mouseenter', () => $cursor.show());
});

然后补充对应CSS即可：

#circularcursor.cursor-hover {
  transform: translate(-50%, -50%) scale(1.5);
}

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