How to Invert Text Color on Mouse Hover with CSS and JavaScript?

Invert Text Color on Mouse Hover

This GIF demonstrates the desired effect:

[GIF of text turning white on mouse hover]

It's possible to create this effect using CSS and JS. One method involves manipulating the clip-path of a duplicated text layer to reveal the inverted color on hover.

<code class="css">h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}</code>

<code class="js">document.body.onmousemove = function(e) {
  // Adjust the cursor position
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';

  // Adjust the clip-path
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
}</code>

When the mouse moves, the script adjusts the clip-path to reveal more of the inverted text, creating the hover effect.

The above is the detailed content of How to Invert Text Color on Mouse Hover with CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!