我正在尝试像在这个网站上那样重制悬停:
当您将鼠标悬停在一个按钮(并且只有一个按钮。我不想在整个网站上画圆圈)时,光标周围会出现一个圆圈。输入“鼠标跟随”后,我尝试了 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>
以及当我悬停按钮时如何围绕鼠标(跟随鼠标)制作圆圈?
最佳答案
考虑一个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>
关于javascript - 悬停在按钮上后圈出跟随光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59268051/