Make cursor with circle only on hover

Question

Hi to all I just wonder if there is possibilities to do same effect as on this link enter link description here but to show circle beside mouse pointer only when hove something.

like this:

'''https://codepen.io/gmrchk/pen/pQobKL'''

It is something more like this below but need to be applied to any link.

 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>

Just use code I found closely to what I need here: Circle follow cursor after hover on button

Answer 1

You need a bit of JavaScript which will change the position of a circle when the mouse moves over the text, and makes the circle invisible when the mouse is not over the text.

Here's a simple snippet. Obviously you will want to alter the various dimensions to suit your particular requirements.

 const circle = document.querySelector('.circle'); const hoverDiv = document.querySelector('.hoverDiv'); hoverDiv.addEventListener('mousemove', e => { circle.style.display = 'block'; circle.style.left = e.clientX - 48 + 'px'; circle.style.top = e.clientY - 48 + 'px'; }); hoverDiv.addEventListener('mouseout', e => { circle.style.display = 'none'; });

 * { margin: 0; } .container { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .hoverDiv { display: : inline-block; cursor: default; width: fit-content; font-size: 64px; } .circle { width: 64px; height: 64px; background-color: cornflowerblue; border-radius: 50%; position: absolute; display: none; z-index: -1; }

 <div class="container"> <div class="circle"></div> <div class="hoverDiv">Here is some text to hover</div> </div>