Comment créer un effet de couleur de texte inversé au survol de la souris à l'aide de CSS et JavaScript ?

Inverser la couleur du texte au survol de la souris

Cet effet consiste à inverser la couleur du texte noir lorsqu'un curseur noir personnalisé le survole. Voici comment cela peut être réalisé en utilisant CSS et JavaScript :

Dupliquez le texte pour créer deux calques, l'un au-dessus de l'autre avec des couleurs de texte opposées. Un calque servira d'arrière-plan, tandis que l'autre sera utilisé pour la couleur inversée.

Positionnez les deux calques de texte précisément l'un sur l'autre en utilisant la position CSS : absolue.

Utilisez un clip -chemin sur le calque de couleur inversé pour révéler la partie souhaitée du texte. La valeur du chemin du clip change dynamiquement en fonction de la position de la souris.

Implémentez un écouteur d'événements JavaScript pour suivre le mouvement de la souris. Au fur et à mesure que le curseur se déplace, calculez le décalage entre la position du curseur et l'élément de texte.

Mettez à jour la valeur du chemin de détourage en utilisant le décalage calculé pour révéler la couleur inversée dans la zone souhaitée.

Par en ajustant le chemin du clip en fonction du mouvement de la souris, l'effet de couleur inversé est obtenu. Gardez à l'esprit que la couleur du curseur doit également être définie sur noir.

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!