javascript - Circle follow cursor after hover on button - Stack Overflow

admin管理员组

文章数量:1289565

I'm trying to remake hover like on this website:

/

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.

I have button like this:

body {
  padding: 100px;
  margin: auto;
}

a {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
}

<a href="#">Button</a>

I'm trying to remake hover like on this website:

https://www.samsaraubud./

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.

I have button like this:

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?

• javascript
• html
• css
• hover
• mouse-cursor

Share Improve this question Follow edited Dec 30, 2021 at 15:06 General Grievance 5,0333838 gold badges3737 silver badges5656 bronze badges asked Dec 10, 2019 at 13:13 AventadorrreAventadorrre 7922 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor

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.

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.

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. Catch the event and set the location of cirlce while the mouse moves.

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>

本文标签： javascriptCircle follow cursor after hover on buttonStack Overflow