„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie invertiere ich die Textfarbe beim Bewegen der Maus mit CSS und JavaScript?

Wie invertiere ich die Textfarbe beim Bewegen der Maus mit CSS und JavaScript?

Veröffentlicht am 11.11.2024
Durchsuche:260

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

Textfarbe beim Bewegen der Maus umkehren

Dieses GIF zeigt den gewünschten Effekt:

[GIF von Text, der weiß wird Mauszeiger]

Es ist möglich, diesen Effekt mit CSS und JS zu erstellen. Eine Methode besteht darin, den Clip-Pfad einer duplizierten Textebene zu manipulieren, um beim Schweben die invertierte Farbe anzuzeigen.

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%));
}
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');
}

Wenn sich die Maus bewegt, passt das Skript den Clippfad an, um mehr vom invertierten Text anzuzeigen, wodurch der Hover-Effekt entsteht.

Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3