Circle cursor with hover effect

Question

I would like to create a custom circle cursor which grow on hovering every link on my page. I created the code below, but the hover effect don't last. It doesn't really show, I don't know why, I guess my javascript is bad...

I tried using only javascript language and keep it simple.

If you have a solution it will be great!

Thanks!

var circle = document.querySelector(".cr");
var dot = document.querySelector(".dot");
var body = document.querySelector("body");

//var link = document.querySelector("a");
var links = Array.from(document.querySelectorAll("a"));

body.addEventListener("mousemove", function(e) {
  
      let x = e.clientX;
      let y = e.clientY;
      var valX = x - 20;
      var valY = y - 20;
      var dotX = x + 7;
      var dotY = y + 7;
      circle.style.left = valX + 'px';
      circle.style.top = valY + 'px';
      dot.style.left = dotX + 'px';
      dot.style.top = dotY + 'px';
  
});


//link.addEventListener("mouseover", function( event ) {
  //circle.style.transform = 'scale(1.5)';
//});

links.forEach( item => {
  
  item.addEventListener("mouseenter", () => {
      circle.classList.add("grow");
   });
  
   item.addEventListener("mouseleave", () => {
    circle.classList.remove("grow");
   });
  
 });

@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;700&display=swap');

*,*::before,*::after {
  box-sizing: border-box;
}
body {
  position: relative;
  padding: 0px;
  margin: 0px;
  outline: 0;
  width: 100%;
  height: 600px;
  background-color: rgba(244,230,150,1);
  cursor: none;
  color: #e56b6f;
}

.cr {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 1px solid #000;
  border-radius: 100%;
  transition: all 80ms ease;
}

.dot {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 5px;
  height: 5px;
  background: black;
  //border: 1px solid #000;
  border-radius: 100%;
  transition: all 80ms ease;
}

main {
  display: flex;
  justify-content: flex-end;
  padding: 50px
}

.wrapper {
  max-width: 600px;
}

h1 {
  font-family: 'Red Rose', cursive;
  font-size: 60px;
  line-height: 60px;
  text-align: right;
}

a {
  color: #e56b6f;
  text-decoration: none;
}

.grow {
  transform: scale(1.5);
}

<main>   
  <div class="cr"></div>
  <div class="dot"></div>
  
  <div class="wrapper">
    <h1>simple circle cursor with <a href="#">hover</a> effect</h1>
  </div>
</main>

Answer 1

adding pointer-events: none to .cr and .dot - since the circle and dot are "above" the links, the mouse enter/leave don't trigger properyl

Also ... add cursor:none to a otherwise, the pointer appears when you hover over a link

var circle = document.querySelector(".cr");
var dot = document.querySelector(".dot");
var body = document.querySelector("body");

//var link = document.querySelector("a");
var links = Array.from(document.querySelectorAll("a"));

body.addEventListener("mousemove", function(e) {
  
      let x = e.clientX;
      let y = e.clientY;
      var valX = x - 20;
      var valY = y - 20;
      var dotX = x + 7;
      var dotY = y + 7;
      circle.style.left = valX + 'px';
      circle.style.top = valY + 'px';
      dot.style.left = dotX + 'px';
      dot.style.top = dotY + 'px';
  
});


//link.addEventListener("mouseover", function( event ) {
  //circle.style.transform = 'scale(1.5)';
//});

links.forEach( item => {
  
  item.addEventListener("mouseenter", () => {
      circle.classList.add("grow");
   });
  
   item.addEventListener("mouseleave", () => {
    circle.classList.remove("grow");
   });
  
 });

@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;700&display=swap');

*,*::before,*::after {
  box-sizing: border-box;
}
body {
  position: relative;
  padding: 0px;
  margin: 0px;
  outline: 0;
  width: 100%;
  height: 600px;
  background-color: rgba(244,230,150,1);
  cursor: none;
  color: #e56b6f;
}

.cr {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 1px solid #000;
  border-radius: 100%;
  transition: all 80ms ease;
  pointer-events: none;
}

.dot {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 5px;
  height: 5px;
  background: black;
  //border: 1px solid #000;
  border-radius: 100%;
  transition: all 80ms ease;
  pointer-events: none;
}

main {
  display: flex;
  justify-content: flex-end;
  padding: 50px
}

.wrapper {
  max-width: 600px;
}

h1 {
  font-family: 'Red Rose', cursive;
  font-size: 60px;
  line-height: 60px;
  text-align: right;
}

a {
  color: #e56b6f;
  text-decoration: none;
  cursor:none;
}

.grow {
  transform: scale(1.5);
}

<main>   
  <div class="cr"></div>
  <div class="dot"></div>
  
  <div class="wrapper">
    <h1>simple circle cursor with <a href="#">hover</a> effect</h1>
  </div>
</main>