How to move custom cursor over a text

I have made a custom cursor but it is not working properly over text(p, h1, button, span). Here is the code

html:

<!-- custom cursor -->
<div class="cursor"></div>

js:

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

    document.addEventListener("mouseover", (e) => {
        cursor.style.left = e.pageX + "px";
        cursor.style.top = e.pageY  + "px";
        console.log(e.pageX, e.pageY); // i checked pageX and pageY values also not change when cursor moves over a text or button

     })

css:

.cursor{
    position: fixed;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ffffff38;
    transition-duration: 0.16s;
    -o-transition-duration: 0.16s;
    -moz-transition-duration: 0.16s;
    -webkit-transition-duration: 0.16s;
    transition-timing-function:ease;
    -o-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
    -webkit-transition-timing-function:ease;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    /* display: none; */
    z-index: 10000;
}
    

It is working fine over links. Can you tell me how can i make the cursor to move smoothly(over all text and buttons)

The mouseover event triggers when you move your mouse over an element - but it doesn't keep triggering when you move the mouse inside that element.

Have you tried mousemove instead?