Le texte survolé changera de couleur à l'emplacement de la souris

Question

Comment puis-je changer la couleur uniquement du texte à l’emplacement de la souris au lieu de tout le texte ? Comme ça, je veux que le cercle que vous pouvez voir suive le mouvement de la souris et en survol, le texte n'affiche qu'une bordure pour la partie de la lettre en survol. J'ai besoin de conseils sur la bibliothèque ou la fonction que je dois utiliser ?

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