在我使用 html、css 和 js 添加自定义光标后，该光标在链接或按钮上不起作用。我应该如何解决？

Question

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style","top: "+(e.pageY-10)+"px; left: "+(e.pageX-10)+"px;")
})

document.addEventListener('click' ,() => {
  cursor.classList.add("expand"); 

  setTimeout(() =>{
    cursor.classList.remove("expand");
  }, 500);
}) 

Answer 1

Try adding the following CSS:

.cursor {
  position: absolute;
}

Here's a fiddle: https://jsfiddle.net/bsxj7pyg/

An element with position: absolute; is positioned relative to the nearest positioned ancestor. In this case, it would follow the cursor.

Answer 2

Add the style pointer-events: none; to your custom cursor to stop your cursor responding to mouse events such as click (or touch).

See working example below:

 const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { cursor.setAttribute("style","top: "+(e.pageY-10)+"px; left: "+(e.pageX-10)+"px;") }) document.addEventListener('click' ,() => { cursor.classList.add("expand"); setTimeout(() =>{ cursor.classList.remove("expand"); }, 500) })

 * { cursor: none; } .cursor { height: 20px; width: 20px; background: black; border-radius: 100px; position: absolute; pointer-events: none; /* add pointer-events: none */ }

 <div class="cursor"></div> <a href="https://www.example.com">Link</a>

Alternatively, instead of hiding the cursor and using a div to replace it, you can give it a custom image using:

* {
  cursor: url('https://i.stack.imgur.com/8ka1W.png'), auto;
}

See example below:

 * { cursor: url('https://i.stack.imgur.com/8ka1W.png'), auto; }

 <a href="https://www.example.com">Link</a>