Use special cursor to change text on hover
P粉665427988
2023-09-05 23:47:42
<p>Please guide me how to change the text on hover, similar to the monopo website. I don't need a background. Just a simple circular effect (like a colored background) and text changes are all you need. Also, if possible, I would like the effect to be active only in the div named "about". Website link:
https://monopo.london/</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here's a simple example to get you started.
The text in "shot" is in an element on top of the main text. Every time the mouse moves, it will be clipped into a circle at the mouse position. It has a white background so it looks like it's covering the text underneath.
<style> .about { position: relative; --x: -0; --y: -0; font-size: 48px; } .overlay { position: absolute; background: white; top: 0; left: 0; z-index: 1; clip-path: circle(1em at var(--x) var(--y)); color: red; } </style> <div class="about"> <div class="underneath">This is some text <br>and some more</div> <div class="overlay">Different characters<br>and again more</div> </div> <script> const about = document.querySelector('.about'); about.addEventListener('mousemove', function() { const x = event.clientX; const y = event.clientY; about.style.setProperty('--x', x + 'px'); about.style.setProperty('--y', y + 'px'); }); </script>