html - JavaScript mousemove not working when stopped moving mouse

Question

I cannot click on the link I linked with my name but, I as soon as my mouse stops moving, It stops hovering. I tried to use mouseover, mouseenter and all the eventListeners but it is not working!

Just wondering if someone could help! Thanks!

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

document.addEventListener("mousemove", e => {
   cursor.setAttribute("style", `top: ${e.pageY - 10}px; left: ${e.pageX - 10}px;`);
    // console.log(e);
});

document.addEventListener("click", (e) => {
    cursor.classList.add("curson-expand");
    cursor.setAttribute("style", `top: ${e.pageY - 15}px; left: ${e.pageX - 15}px;`);

    setTimeout(() => {
        cursor.classList.remove("curson-expand");
        cursor.setAttribute("style", `top: ${e.pageY - 10}px; left: ${e.pageX - 10}px;`);
    }, 500)
});

*, body {
/*   cursor: none; */
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    z-index: 1000;
    transition: all ease 0.1s;
}

.curson-expand {
    width: 30px;
    height: 30px;
    border: 3px solid #d6a309;
}

h2 {
    font-family: Arial Black, Arial Bold, sans-serif;
}

h2 a {
  text-decoration: none;
  color: inherit;
}

h2 a:hover {
  color: #d6a309;
  text-decoration: underline;
}

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

<h2>HI! I’M <a target="_blank" href="https://www.linkedin.com/in/nirzar-patel/">NIRZAR PATEL</a></h2>

question from:https://stackoverflow.com/questions/65892342/javascript-mousemove-not-working-when-stopped-moving-mouse

Answer 1

The problem is that your custom cursor is jumping in between the actual cursor and the link, so your cursor is actually hovering over your custom cursor rather than the link. You need to add pointer-events:none to your custom cursor:

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

document.addEventListener("mousemove", e => {
   cursor.setAttribute("style", `top: ${e.pageY - 10}px; left: ${e.pageX - 10}px;`);
    // console.log(e);
});

document.addEventListener("click", (e) => {
    cursor.classList.add("curson-expand");
    cursor.setAttribute("style", `top: ${e.pageY - 15}px; left: ${e.pageX - 15}px;`);

    setTimeout(() => {
        cursor.classList.remove("curson-expand");
        cursor.setAttribute("style", `top: ${e.pageY - 10}px; left: ${e.pageX - 10}px;`);
    }, 500)
});

*, body {
/*   cursor: none; */
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    z-index: 1000;
    transition: all ease 0.1s;
    pointer-events: none;
}

.curson-expand {
    width: 30px;
    height: 30px;
    border: 3px solid #d6a309;
}

h2 {
    font-family: Arial Black, Arial Bold, sans-serif;
}

h2 a {
  text-decoration: none;
  color: inherit;
}

h2 a:hover {
  color: #d6a309;
  text-decoration: underline;
}

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

<h2>HI! I’M <a target="_blank" href="https://www.linkedin.com/in/nirzar-patel/">NIRZAR PATEL</a></h2>