Javascript 自定义光标不在超链接上工作

我在一个网站上工作，我需要一个自定义光标来代替我创建的默认光标，它检测到鼠标移动，但当我试图将鼠标放在超链接上时，什么都没有发生。这是我的密码

HTML

<div class='cursor'></div>
<div class='cursor'></div>
<h1>Custom cursor</h1>
<a href="#">A link </a>

JS

* {
  cursor: none;
}
.cursor {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 99999;
}
.cursor:nth-child(1) {
  background-color: #3A1C71;
  z-index: 999999;
}
.cursor:nth-child(2) {
  background-color: #FFAF7B;
}

$(document)
  .mousemove(function(e) {
    $('.cursor')
      .eq(0)
      .css({
        left: e.pageX,
        top: e.pageY
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.pageX,
          top: e.pageY
        });
    }, 100);
  })

我会感谢你的帮助

---

谢谢：）

对于自定义光标，不必手动执行所有这些操作。如果您有一个可以用作光标的图像，您可以这样引用它：

cursor: url('path-to-image.png'), auto; 

有关更多详细信息，请参见此处：

---

如果要使用当前的解决方案：

超链接没有反应，因为两个光标div在它上面移动，因此阻塞了链接本身

可以为这些div禁用鼠标事件。然后，这些事件将影响参考底图元素：

.cursor {
  pointer-events: none;
}

---

我修改了解决方案，为自定义光标提供了一种纯css方式。我建议如果它对你的项目有效的话，就用它来代替。我想避免图像作为光标，因为它在UI体验上看起来并不漂亮