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

我试图在这个网站上重新制作hover：

当你们把鼠标悬停在一个按钮上（而且是唯一的按钮，我不想在整个网站上画圆圈），一个圆圈就会出现在光标周围。在键入“鼠标跟随”后，我尝试了许多来自codepen的解决方案，但没有任何效果

我有这样的按钮：

正文{
填充：100px；
保证金：自动；
}
a{
颜色：红色；
边框：2倍纯红；
填充：20px 50px；
}

---

您可以使用

mousemove

事件来完成此操作。捕捉事件并在鼠标移动时设置cirlce的位置

window.addEventListener（'mousemove'，函数（e）{
document.getElementById（“圆圈”）.style.display=“块”；
document.getElementById（“圆圈”）.style.left=e.offsetX+“px”；
document.getElementById（“圆圈”）.style.top=e.offsetY+“px”；
});
正文{
填充：100px；
保证金：自动；
}
a{
颜色：红色；
边框：2倍纯红；
填充：20px 50px；
}
#圈{
宽度：30px；
高度：30px；
边框：1px纯红；
边界半径：50%；
位置：固定；
显示：无；
}
将
径向梯度
作为背景，使
固定
，然后根据光标调整位置


var h=document.querySelector（'.cursor'）；
document.body.onmousemove=函数（e）{
/*15=背景尺寸/2*/
h、 setProperty（'background-position'，（e.clientX-15）+'px'+（e.clientY-15）+'px'）；
}
正文{
填充：100px0；
}
a、 光标{
颜色：红色；
边框：2倍纯红；
填充：20px 50px；
背景：
径向梯度（最远侧，
透明钙（100%-3px），
红色钙（100%-2px）钙（100%-1px），
透明（100%）
固定/*固定到屏幕*/
不重复；/*不重复*/
背景大小：30px 30px；/*控制圆的大小*/
}
更新

它甚至在按钮的边界上显示完整的圆


const btn=document.querySelector（“.button”）
const circle=document.querySelector（“.circle”）
btn.onmouseinter=函数（）{
圈出.classList.add（“in”）
}
btn.onmousemove=函数（e）{
常数{
顶部
左边
宽度，
高度
}=btn.getBoundingClientRect（）
常数{
克利提，
客户端
}=e
if（clientXleft+width | | clientY>top+height）{
圈出.classList.remove（“in”）
}
circle.style.top=`${clientY-top}px`
circle.style.left=`${clientX-left}px`
};
正文{
利润率：20px；
填充：20px；
}
.按钮{
填充：40px 80px；
边框：1px纯灰；
颜色：蓝色；
显示：内联块；
位置：相对位置；
}
.圆圈{
位置：绝对位置；
显示：无；
宽度：30px；
高度：30px；
边界半径：50%；
排名：0；
左：0；
转换：翻译（-50%，-50%）；
边框：2倍纯红；
}
圆{
显示：块；
}

按钮
是的，但它可以在整个网站上运行，我希望圆圈只在我悬停按钮时出现，并且只在它的区域出现是的！这就是我要找的。但是我怎样才能把这个圆圈变大呢？当我调整bg大小和径向梯度时，它不在中心cursor@MateuszM你还需要调整JS代码，你可以看到我使用了15，这是背景大小的一半，以使它在中心有任何办法使这样：？我的意思是，以你的例子来说，圆圈被边界切断了。在这个例子中（从上面的链接），圆圈仍然是满的，直到你离开鼠标button@MateuszM您可以这样尝试：@MateuszM在伪元素中，我在所有方向上使用-20px，增加该值，它至少需要等于圆半径