How can I change the color of a text just where the mouse is and not in all the text?

I want that the circle that you can see follow the mouse and on hover the text show just the border of the section of the letter that is in hover

I need an advice about which library or function I need to use?

CodePudding user response：

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

<div >
  <h1>abc</h1>
  <div >
    <h1>abc</h1>
  </div>
</div>

CodePudding user response：

Here's an example that uses a minimal JavaScript

This works by overlapping a hidden text in a pseudoelement. When you hover the title, the mouse coordinates are updated as custom properties in the CSS so you can control the clip-path property of the psuedoelement.

The color of the text (regular and highlighted), its outline (regular and highlighted) and the radius of the highlighted text can be set as CSS variables.

const title = document.querySelector('h1');
let rect = title.getBoundingClientRect();

/* updates boundingbox properties */
title.addEventListener('mouseenter', () => {
   rect = title.getBoundingClientRect();
});

title.addEventListener('mousemove', (event) => {
   const xcoord = event.clientX - rect.x,
         ycoord = event.clientY - rect.y;

   /* updates custom properties */
   title.style.setProperty('--xcoord', xcoord   "px")
   title.style.setProperty('--ycoord', ycoord   "px")
});

h1 {
   --radius : 20px;   
   --outline: hsl(200, 35%, 45%);
   text-shadow: 1px 1px 0 var(--outline),
                1px -1px 0 var(--outline),
                -1px 1px 0 var(--outline),
                -1px -1px 0 var(--outline);
   
   position: relative;
   margin: 0;
   padding: 0;
   color: hsl(200, 60%, 45%);
   font: 600 8rem/1 system-ui;
}

h1::before {
   content: attr(data-text);
   position: absolute;
   inset: 0;
   cursor: pointer;
   color: #fff;
   text-shadow: inherit;
   
   clip-path: circle(var(--radius) at 
      var(--xcoord, calc(var(--radius) * -1)) 
      var(--ycoord, calc(var(--radius) * -1))
   )
}

<h1 data-text="HOVER ME">HOVER ME</h1>