Gunakan kursor khas untuk menukar teks pada tuding

Question

Sila bimbing saya cara menukar teks pada tuding, serupa dengan tapak web monopo. Saya tidak memerlukan latar belakang. Hanya kesan bulat mudah (seperti latar belakang berwarna) dan perubahan teks adalah semua yang anda perlukan. Juga, jika boleh, saya ingin kesannya aktif hanya dalam div bernama "kira-kira". pautan laman web: https://monopo.london/

Answer 1

Berikut ialah contoh mudah untuk anda bermula.

Teks dalam "Lens" berada dalam elemen di atas teks utama. Setiap kali tetikus bergerak, ia akan dipotong menjadi bulatan pada kedudukan tetikus. Ia mempunyai latar belakang putih jadi ia kelihatan seperti menutup teks di bawahnya.

<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>