Как сделать свой курсор?

Question

[Wasya UK]

Сделал курсор прозрачным, создал квадратик и перемещаю его по координатам курсора. Но появилась проблема - когда пытаюсь кликнуть, то получаеться что кликаю на квадрат, а не на тот элемент, который мне надо. Z-index нужно оставить 999, потому что курсор тогда скрывается за некоторыми элементами. Как решить такую проблему?

export default class CustomCursor {
  size = 128;
  cursor = null;

  constructor() {
    this.cursor = document.createElement('div');
    this.cursor.style.width = `${this.size}px`;
    this.cursor.style.height = `${this.size}px`;
    this.cursor.style.background = 'black';
    this.cursor.style.position = 'absolute';
    this.cursor.style.zIndex = 1;
  }

  activate() {
    document.body.prepend(this.cursor);
    document.documentElement.style.cursor = 'none';
    document.body.addEventListener('mousemove', e => {
      this.cursor.style.left = `${e.clientX - (this.size / 2)}px`;
      this.cursor.style.top = `${e.clientY - (this.size / 2)}px`;
    });
  }
}

Comments

[Rustam Bainazarov]

Курсору нужно добавить pointer-events: none;

Answer 1

[Владимир Коротенко]

https://stackoverflow.com/questions/45962081/css-c...

Comments

[Максим]

я не понял только при чём тут SVG ?
если в вопросе сказано

когда пытаюсь кликнуть, то получаеться что кликаю на квадрат, а не на тот элемент,

проблема явно в pointer-events:

[Wasya UK]

Сначала пожалуйста вопрос прочитайте) А первую линку с гугла я и сам найти смогу)