How to move custom cursor over a text

Question

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)

Answer 1

I think below code will help you. There are some mistakes in your code like background color of cursor background-color: #ffffff38;, this is white which can't be seen in white page. And also I hide the original cursor. In JavaScript code you have used mouseover which will trigger every time when your mouse enter the specific area, you should use mousemove, it will trigger everytime when you move your mouse.

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

document.addEventListener("mousemove", (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

})

html{
  cursor: none;
}
.cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid black;
  z-index: 10000;
}

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

Answer 2

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?