具有悬停效果的圆形光标

Question

我想创建一个自定义圆形光标，它会随着悬停在我页面上的每个链接而增长。 我创建了下面的代码，但悬停效果不会持续。 它并没有真正显示，我不知道为什么，我猜我的 javascript 很糟糕......

我尝试只使用 javascript 语言并保持简单。

如果你有解决方案，那就太好了！

谢谢！

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

将pointer-events: none 添加到.cr 和.dot - 由于圆圈和点位于链接“上方”，因此鼠标进入/离开不会触发正确

另外...添加 cursor:none 到 a 否则，当您将鼠标悬停在链接上时会出现指针

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>