Invertieren Sie die Textfarbe beim Bewegen der Maus mit CSS und JavaScript

Um den gewünschten Hover-Effekt zu erzielen, bei dem schwarzer Text in Weiß umgewandelt wird, während die Farbe beibehalten wird Erscheinungsbild eines schwarzen Cursors können wir die Funktionen von CSS-Clip-Pfaden mit der JavaScript-Ereignisbehandlung kombinieren.

Der Ansatz besteht darin, zwei Textebenen zu erstellen: die primäre Textebene und eine invertierte Textebene. Die invertierte Textebene wird hinter der primären Textebene positioniert und ihre Textfarbe ist auf Weiß eingestellt.

Mit JavaScript erfassen wir die Mausbewegung und passen den Clip-Pfad der invertierten Textebene dynamisch an. Während sich die Maus bewegt, wird der Clippfad angepasst, um mehr vom invertierten Text sichtbar zu machen, wodurch die Illusion entsteht, dass der Primärtext seine Farbe umkehrt.

Hier ist eine Aufschlüsselung der wichtigsten Codekomponenten:

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

Beispielcode:

WORK

Ergebnis:

Wenn Sie mit der Maus über den Text „WORK“ fahren, geht der schwarze Text allmählich in Weiß über während sich der Mauszeiger bewegt.