Teks yang dilegar akan bertukar warna di lokasi tetikus

Question

Bagaimanakah saya boleh menukar warna hanya teks di lokasi tetikus dan bukannya semua teks? Seperti ini saya mahu bulatan yang anda boleh lihat mengikuti pergerakan tetikus dan pada hover teks hanya menunjukkan sempadan untuk bahagian huruf dalam hover saya perlukan nasihat tentang perpustakaan atau fungsi yang perlu saya gunakan?

P粉936568533 · Answer

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