Teks yang dilegar akan bertukar warna di lokasi tetikus

Question

Bagaimana untuk menukar hanya warna teks di lokasi tetikus dan bukannya semua teks? Macam ni

Saya mahu bulatan yang anda boleh lihat mengikuti pergerakan tetikus dan pada tuding teks hanya menunjukkan sempadan untuk bahagian huruf dalam tuding

Saya perlukan nasihat tentang perpustakaan atau fungsi yang perlu saya gunakan?

Answer 1

const fx = document.querySelector(".fx");

document.addEventListener("pointermove", e => {
  fx.style.top = e.clientY + "px";
  fx.style.left = e.clientX + "px";
  fx.querySelector("h1").style.transform = `translate(${(e.clientX - fx.getBoundingClientRect().width / 2) * -1}px, ${(e.clientY - fx.getBoundingClientRect().height / 2) * -1}px)`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
}

.container h1 {
  font-size: 10rem;
  color: red;
}

.container .fx {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
}

.container .fx h1 {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
  position: relative;
}

  
abc
  

    
abc