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

Question

Comment changer uniquement la couleur 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 qu'en survol, le texte n'affiche qu'une bordure pour la partie de la lettre en survol

J'ai besoin de conseils sur quelle bibliothèque ou fonction je dois utiliser ?

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