После того, как я добавил пользовательский курсор, используя 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

Добавьте стиль pointer-events: none; к пользовательскому курсору, чтобы курсор не реагировал на такие события мыши, как щелчок (или касание).

См. Рабочий пример ниже:

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>

В качестве альтернативы, вместо того, чтобы скрывать курсор и использовать div для его замены, вы можете присвоить ему пользовательское изображение, используя:

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

См. Пример ниже:

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

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

Answer 2

Попробуйте добавить следующий CSS:

.cursor {
  position: absolute;
}

Вот скрипка: https://jsfiddle.net/bsxj7pyg/

Элемент с position: absolute; расположен относительно ближайшего расположенного предка.В этом случае он будет следовать за курсором.