सीएसएस और जावास्क्रिप्ट का उपयोग करके माउस होवर पर टेक्स्ट का रंग बदलें

वांछित होवर प्रभाव प्राप्त करने के लिए, जहां काला टेक्स्ट बनाए रखते हुए सफेद में बदल जाता है एक काले कर्सर की उपस्थिति, हम जावास्क्रिप्ट इवेंट हैंडलिंग के साथ सीएसएस क्लिप-पथ की क्षमताओं को जोड़ सकते हैं।

दृष्टिकोण में पाठ की दो परतें बनाना शामिल है: प्राथमिक पाठ परत और एक उलटा पाठ परत। उलटा टेक्स्ट परत प्राथमिक टेक्स्ट परत के पीछे स्थित होता है और इसका टेक्स्ट रंग सफेद पर सेट होता है।

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

यहां प्रमुख कोड घटकों का विवरण दिया गया है:

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

उदाहरण कोड:

WORK

परिणाम:

जब आप "WORK" टेक्स्ट पर होवर करते हैं, तो काला टेक्स्ट धीरे-धीरे सफेद में परिवर्तित हो जाएगा जैसे ही माउस कर्सर चलता है।