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事件来做到这一点。捕捉事件并在鼠标移动时设置cirlce的位置。

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>

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

3 个答案: