悬停在按钮上后圈出跟随光标
Circle follow cursor after hover on button
我正在尝试像在这个网站上那样重新制作悬停:
当您将鼠标悬停在一个按钮(并且只有一个按钮。我不想在整个网站上画圈)时,光标周围会出现一个圆圈。输入 "mouse follow" 后,我尝试了很多来自 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>
悬停按钮时如何围绕鼠标(跟随鼠标)画圈?
您可以通过 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>
考虑一个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>
已更新
即使在按钮的边界上也显示完整的圆圈
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>
我正在尝试像在这个网站上那样重新制作悬停:
当您将鼠标悬停在一个按钮(并且只有一个按钮。我不想在整个网站上画圈)时,光标周围会出现一个圆圈。输入 "mouse follow" 后,我尝试了很多来自 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>
悬停按钮时如何围绕鼠标(跟随鼠标)画圈?
您可以通过 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>
考虑一个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>
已更新
即使在按钮的边界上也显示完整的圆圈
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>