自定义光标在交互元素（如链接/按钮）上卡顿并显示默认指针的问题求助

我现在遇到个麻烦：我做了一个自定义光标，由一个小黑点和一个大一点的半透明尾随圆圈组成。全局用的时候没问题，但鼠标悬停在链接、按钮这类交互元素上时，自定义光标就卡在元素边缘不动了，还会显示默认的手型指针。

我的实现代码如下：

<style>
  body {
    cursor: none;
  }
  .cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #2f2f2f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
  }
  .cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    background: rgba(232, 226, 223, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
  }
  a {
    cursor: none;
  }
</style>
<div class="cursor"></div>
<div class="cursor-follower"></div>
<script>
  const cursor = document.querySelector('.cursor');
  const follower = document.querySelector('.cursor-follower');
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
  });
</script>

我已经尝试过的操作： #

• 用HTML、CSS和JS实现了包含小黑点和尾随圆圈的自定义光标
• 全局设置pointer-events: none和cursor: none来禁用默认光标
• 给链接标签单独加了cursor: none

但问题还是没解决，求各位大佬指点！

问题分析与解决方法 #

1. 为什么会出现默认指针？

你只给<a>标签加了cursor: none，但其他交互元素（比如<button>、<input>、<select>甚至带tabindex的元素）仍然会触发浏览器的默认光标样式。而且浏览器对交互元素的cursor属性优先级很高，局部设置会覆盖body的全局设置。

2. 为什么自定义光标会卡顿/冻结？

看你的JS代码，只更新了.cursor的位置，.cursor-follower完全没处理移动逻辑！这就是尾随圆圈卡住的核心原因。另外，虽然pointer-events: none已经让自定义光标元素不干扰鼠标事件，但如果交互元素的z-index比自定义光标高，也可能导致视觉上的“卡顿”（不过你已经设置了很高的z-index，这个可能性不大）。

修复后的完整代码：

<style>
  body {
    cursor: none;
  }
  /* 给所有交互元素统一设置cursor:none，覆盖默认样式 */
  a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]) {
    cursor: none;
  }
  .cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #2f2f2f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    /* 加过渡让小黑点移动更平滑 */
    transition: transform 0.1s ease;
  }
  .cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    background: rgba(232, 226, 223, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    /* 尾随圆圈的过渡慢一点，形成自然拖尾效果 */
    transition: transform 0.2s ease;
  }
</style>
<div class="cursor"></div>
<div class="cursor-follower"></div>
<script>
  const cursor = document.querySelector('.cursor');
  const follower = document.querySelector('.cursor-follower');
  let mouseX = 0;
  let mouseY = 0;
  let followerX = 0;
  let followerY = 0;

  document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    // 更新小黑点的位置
    cursor.style.left = `${mouseX}px`;
    cursor.style.top = `${mouseY}px`;
  });

  // 用requestAnimationFrame实现平滑的尾随效果，比直接绑定mousemove更流畅
  function animateFollower() {
    // 系数越小，拖尾的延迟感越明显，可根据需求调整
    followerX += (mouseX - followerX) * 0.15;
    followerY += (mouseY - followerY) * 0.15;
    follower.style.left = `${followerX}px`;
    follower.style.top = `${followerY}px`;
    requestAnimationFrame(animateFollower);
  }
  animateFollower();
</script>

关键修复点：

• 新增了对所有交互元素的cursor: none设置，彻底覆盖浏览器默认光标样式
• 完善了.cursor-follower的移动逻辑，用requestAnimationFrame实现自然的拖尾效果
• 给两个光标元素加了transition属性，让移动过程更顺滑

另外，如果你还有自定义的交互元素（比如带onclick的div），记得也给它们加上cursor: none；如果想偷懒也可以用* { cursor: none !important; }，不过!important尽量少用，优先精准选择元素。

备注：内容来源于stack exchange，提问作者Anil Eren