[英]Circle follow cursor after hover on button
I'm trying to remake hover like on this website:我正在尝试像在这个网站上那样重新制作悬停:
https://www.samsaraubud.com/ https://www.samsaraubud.com/
When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor.当您将鼠标悬停在按钮上(并且只有按钮。我不想在整个网站上圈出圆圈)时,光标周围会出现一个圆圈。 I tried so many solutions from codepen after typing "mouse follow" but nothing works.
键入“鼠标跟随”后,我尝试了许多来自 codepen 的解决方案,但没有任何效果。
I have button like this:我有这样的按钮:
https://codepen.io/Aventadorrre/pen/mdyPJbv 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>
and how to make circle around mouse (following mouse) when i hover button?以及当我悬停按钮时如何围绕鼠标(跟随鼠标)做圆圈?
Consider a radial-gradient
as background that you make fixed
then simply adjust the position based on the cursor将
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>
If you want the circle above the text consider pseudo element and the same trick:如果您想要文本上方的圆圈,请考虑伪元素和相同的技巧:
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>
Updated更新
It shows full circle even on the boundaries of the button即使在按钮的边界上它也显示完整的圆圈
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>
old answer The answer is extension of the answer by @Temani Afif.旧答案答案是@Temani Afif 对答案的扩展。
The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button. 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>
You can do that with mousemove
event.你可以用
mousemove
事件来做到这一点。 Catch the event and set the location of cirlce while the mouse moves.捕捉事件并设置鼠标移动时circlce的位置。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.