Элемент HTML по центру курсора в JavaScript

Question

Не мог понять и найти как поставить элемент в центре курсора, поэтому решил поделиться

let w = 100;
let h = 100;
let block = document.getElementById("block");

window.onload = () => {
  block.style.height = h + "px";
  block.style.width = w + "px";
  window.addEventListener("mousemove", function(e) {
    let block = document.getElementById("block");
    block.style.top = e.clientY - h / 2 + "px";
    block.style.left = e.clientX - w / 2 + "px";
  })
}

body {
  margin: 0%;
  background: rgb(50, 50, 50);
}

div {
  background: rgb(15, 205, 255);
  position: absolute;
  border-radius: 50%;
}

<body>
  <div id="block"></div>
</body>

Answer 1

Это тебе нужно получить размер курсора пользователя, но т.к нету специального API или функции которая предоставляет эту возможность, ты не сможешь этого сделать, разве что подобрать размеры под стандартный курсор мыши, но учитывай что у каждого может стоять свой спрайт курсора и из-за этого будет смещение круга

В моем случае так, половина ширины и высоты курсора плюс координаты центра круга:

        block.style.top = e.clientY - h / 2 + 8 + "px";
        block.style.left = e.clientX - w / 2 + 4 + "px";

БЛОГ НА HUSL

Элемент HTML по центру курсора в JavaScript

Ответы (1 шт):