onmouseover प्रॉपर्टी से बैकग्राउंड रंग बदलना
onmouseover इवेंट हैंडलर तब ट्रिगर होता है जब माउस पॉइंटर किसी एलिमेंट पर जाता है। HTML DOM style.backgroundColor प्रॉपर्टी के साथ संयुक्त रूप से, यह होवर पर पेज का बैकग्राउंड रंग बदल सकता है।
उदाहरण: होवर पर बैकग्राउंड रंग बदलें
<!DOCTYPE html>
<html>
<body>
<h2>हेडिंग टू</h2>
<a onmouseover="document.body.style.backgroundColor='orange'">
बैकग्राउंड रंग बदलने के लिए यहां होवर करें।
</a><br>
</body>
</html>
आउटपुट
जब उपयोगकर्ता लिंक टेक्स्ट पर माउस होवर करता है, तो पेज का बैकग्राउंड रंग नारंगी हो जाता है।
बेहतर दृष्टिकोण: CSS :hover
आधुनिक वेब विकास में, JavaScript के बजाय CSS का उपयोग करना बेहतर है:
<style>
.color-change:hover {
background-color: orange;
cursor: pointer;
}
</style>
<a class="color-change">होवर करके रंग बदलें</a>
JavaScript दृष्टिकोण के लाभ
- डायनामिक रंग गणना
- कई एलिमेंट्स पर सशर्त लॉजिक
- एनिमेशन ट्रिगर करना
संबंधित इवेंट्स
- onmouseout: माउस एलिमेंट छोड़ने पर
- onmousemove: माउस एलिमेंट के अंदर घूमने पर
- onmouseenter/onmouseleave: बबलिंग नहीं करते (बच्चे एलिमेंट्स पर ट्रिगर नहीं)
