javascript - 悬停在按钮上后圈出跟随光标

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>