Comment inverser la couleur du texte au survol de la souris avec CSS et JavaScript ?

Inverser la couleur du texte au survol de la souris

Ce GIF montre l'effet souhaité :

[GIF du texte devenant blanc survol de la souris]

Il est possible de créer cet effet en utilisant CSS et JS. Une méthode consiste à manipuler le chemin de détourage d'un calque de texte dupliqué pour révéler la couleur inversée au survol.

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

Lorsque la souris bouge, le script ajuste le chemin de détourage pour révéler davantage de détails. texte inversé, créant l'effet de survol.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!