Custom cursor doesn't move

Question

I'm trying to create a custom cursor for my website but it does not work well and I don't know what the problem is.

Here is the link to the code on Codepen

https://codepen.io/mahmoudkattan/pen/OJZXQow

const cursorTag = document.querySelector("div.cursor");
const cursor = cursorTag.querySelector("div");

let currentX = 0;
let currentY = 0;
let aimX = 0;
let aimY = 0;
let speed = 0.3;

const animate = function () {
    currentX += (aimX - currentX) * speed;
    currentY += (aimY - currentY) * speed;

    cursor.style.left = currentX + "px";
    cursor.style.top = currentY + "px";

    requestAnimationFrame(animate);

};

animate();

document.addEventListener("mouseover", function (event) {
    aimX = event.pageX;
    aimY = event.pageY;
});

console.log(aimX);

div.cursor div {
    z-index: 9999999;
    position: fixed;
    top: 300px;
    left: 300px;
    width: 45px;
    height: 45px;
    border: 1px solid var(--white);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

<div class="cursor">
        <div></div>
     </div>

who can help with that?

Thanks

Answer 1

just change mouseover to mousemove

document.addEventListener("mousemove", function (event) {
    aimX = event.pageX;
    aimY = event.pageY;
});

Answer 2

You want mousemove not mouseover