将鼠标悬停在按钮上后圆圈跟随光标

Question

我正在尝试像在这个网站上一样重新制作悬停：

https://www.samsaraubud.com/

当您将鼠标悬停在一个按钮上（也是唯一一个按钮。我不想在整个网站上圈子）时，光标周围会出现一个圆圈。输入“鼠标跟随”后，我从 codepen 尝试了很多解决方案，但没有任何效果。

我有这样的按钮：

https://codepen.io/Aventadorrre/pen/mdyPJbv

body {
  padding: 100px;
  margin: auto;
}

a {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
}

<a href="#">Button</a>

以及当我悬停按钮时如何围绕鼠标（跟随鼠标）转圈？

Answer 1

将radial-gradient 视为您制作fixed 的背景，然后只需根据光标调整位置

var h =document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  /* 15 = background-size/2 */
  h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background:
    radial-gradient(farthest-side, 
     transparent calc(100% - 3px),
     red calc(100% - 2px) calc(100% - 1px),
     transparent 100%) 
     fixed /* Fixed to the screen*/ 
     no-repeat; /* Don't repeat*/

  background-size:30px 30px; /* Control the size of the circle */
  
}

<a class="cursor" href="#">Button</a>

如果你想要文字上方的圆圈考虑伪元素和相同的技巧：

var h =document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background-size:0 0; 
  position:relative;
}
a.cursor::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(farthest-side, 
     blue  calc(100% - 1px),
     transparent 100%) 
     fixed /* Fixed to the screen*/ 
     no-repeat; /* Don't repeat*/
  background-size:30px 30px;
  background-position:inherit;
}

<a class="cursor" href="#">Button</a>

Answer 2

更新

即使在按钮的边界上也会显示完整的圆圈

const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")

btn.onmouseenter = function() {
  circle.classList.add("in")
}


btn.onmousemove = function(e) {
  const {
    top,
    left,
    width,
    height
  } = btn.getBoundingClientRect()
  const {
    clientY,
    clientX
  } = e
  if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
    circle.classList.remove("in")
  }
  circle.style.top = `${clientY - top}px`
  circle.style.left = `${clientX - left}px`
};

body {
  margin: 20px;
  padding: 20px;
}

.button {
  padding: 40px 80px;
  border: 1px solid grey;
  color: blue;
  display: inline-block;
  position: relative;
}

.circle {
  position: absolute;
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border: 2px solid red;
}

.circle.in {
  display: block;
}

<a class="button">
  Button
  <span class="circle"></span>
</a>

---

旧答案 答案是@Temani Afif 对答案的扩展。

mousemove 的侦听器被添加到按钮本身而不是主体上，这将提高性能，因为仅当您将鼠标悬停在按钮上时才会调用 cb。

var h = document.querySelector(".cursor");

h.onmousemove = function(e) {
  /* 15 = background-size/2 */
  h.style.setProperty(
    "background-position",
    e.clientX - 15 + "px " + (e.clientY - 15) + "px"
  );
};

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
  no-repeat;
  /* Don't repeat*/
  background-size: 0px 0px;
  /* by default, circle is of 0px */
}

a.cursor:hover {
  background-size: 30px 30px;
  /* Control the size of the circle */
}

<a class="cursor" href="#">Button</a>

Answer 3

您可以通过 mousemove 事件来做到这一点。在鼠标移动时捕捉事件并设置圆的位置。

window.addEventListener('mousemove', function(e){ 
  document.getElementById("circle").style.display = "block";
  document.getElementById("circle").style.left = e.offsetX + "px";
  document.getElementById("circle").style.top = e.offsetY + "px"; 
});

body {
  padding: 100px;
  margin: auto;
}

a {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
}

#circle{
  width: 30px;
  height: 30px;
  border: 1px solid red;
  border-radius: 50%;
  position: fixed;
  display: none;
}

<a href="#">Button</a>

<span id="circle"></span>