JavaScript Cursor प्रॉपर्टी: माउस कर्सर शैली बदलें

CSS cursor प्रॉपर्टी माउस पॉइंटर की उपस्थिति निर्धारित करती है जब यह किसी एलिमेंट पर होवर करता है। JavaScript से इसे डायनामिकली बदला जा सकता है।

उदाहरण

<!DOCTYPE html> <html> <head> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    .sample { font-size: 20px; font-weight: 500; padding: 20px; background: #f0f0f0; border-radius: 8px; transition: cursor 0.3s; } 
    button { padding: 10px 20px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript Cursor प्रॉपर्टी</h1> 
<p class="sample">इस पैराग्राफ पर होवर करें, फिर बटन क्लिक करें</p> 
<h3>नीचे दिए गए बटन पर क्लिक करने के बाद पैराग्राफ पर होवर करें</h3> 
<button class="Btn">कर्सर बदलें (Crosshair)</button> 
<script> 
    const sampleEle = document.querySelector(".sample"); 
    const btn = document.querySelector(".Btn"); 
    let isCrosshair = false; 
    
    btn.addEventListener("click", () => { 
        isCrosshair = !isCrosshair; 
        sampleEle.style.cursor = isCrosshair ? "crosshair" : "default"; 
        btn.textContent = isCrosshair ? "डिफ़ॉल्ट कर्सर पर वापस" : "कर्सर बदलें (Crosshair)"; 
    }); 
</script> </body> </html>

आउटपुट

बटन क्लिक करने के बाद, पैराग्राफ पर होवर करने पर कर्सर क्रॉसहेयर (✚) में बदल जाता है।

सामान्य Cursor मान

कस्टम कर्सर: cursor: url('cursor.png'), auto; का उपयोग करें।