<a href="">item</a>
<a href="">item1</a>
<a href="">item2</a>
<a href="">item3</a>
<a href="">item4</a>

<div id="cursor"></div>

#cursor {
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: 0.1s linear;
}

a {
  font-size: 24px;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
  cursor: none;
}

a:hover {
  color: red;
}

#cursor.hover {
  background: none;
  width: 40px;
  height: 40px;
  border: 1px solid #000;
}

window.onload = function () {
  document.querySelectorAll("a").forEach(function (el) {
    el.addEventListener("mousemove", function () {
      document.querySelector("#cursor").classList.add("hover");
    });
  });
};

window.addEventListener("mousemove", function (e) {
  e = window.event;
  cursor.style.left = `${e.pageX}px`;
  cursor.style.top = `${e.pageY}px`;
});

document.querySelectorAll("a").forEach(function (el) {
  el.addEventListener("mouseout", function () {
    document.querySelector("#cursor").classList.remove("hover");
  });
});