माउस होवर पर टेक्स्ट का रंग उल्टा करें

यह GIF वांछित प्रभाव प्रदर्शित करता है:

[टेक्स्ट का GIF जो सफेद हो रहा है माउस होवर]

सीएसएस और जेएस का उपयोग करके यह प्रभाव बनाना संभव है। एक विधि में होवर पर उल्टे रंग को प्रकट करने के लिए डुप्लिकेट टेक्स्ट परत के क्लिप-पथ में हेरफेर करना शामिल है।

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

जब माउस चलता है, तो स्क्रिप्ट अधिक उल्टे पाठ को प्रकट करने के लिए क्लिप-पथ को समायोजित करती है, जिससे होवर प्रभाव पैदा होता है।