हम HTML डॉक्यूमेंट में विभिन्न एलिमेंट्स के लिए कर्सर इमेज को CSS cursor प्रॉपर्टी का उपयोग करके मैनिपुलेट कर सकते हैं।
सिंटैक्स
CSS cursor प्रॉपर्टी का सिंटैक्स निम्नानुसार है: Selector { cursor: /*value*/ }
CSS cursor प्रॉपर्टी के लिए निम्नलिखित मान हैं:
| क्र.सं. | मान और विवरण |
|---|---|
| 1 | alias यह दर्शाता है कि किसी चीज़ का एलियास बनाया जाना है |
| 2 | all-scroll यह दर्शाता है कि किसी चीज़ को किसी भी दिशा में स्क्रॉल किया जा सकता है |
| 3 | auto यह डिफ़ॉल्ट है और ब्राउज़र एक कर्सर सेट करता है |
| 4 | cell यह दर्शाता है कि एक सेल (या सेल्स का समूह) चुना जा सकता है |
| 5 | context-menu यह दर्शाता है कि एक कॉन्टेक्स्ट-मेनू उपलब्ध है |
| 6 | col-resize यह दर्शाता है कि कॉलम को क्षैतिज रूप से रिसाइज़ किया जा सकता है |
| 7 | copy यह दर्शाता है कि कुछ कॉपी किया जाना है |
| 8 | crosshair यह क्रॉसहेयर के रूप में रेंडर होता है |
| 9 | default यह डिफ़ॉल्ट कर्सर रेंडर करता है |
| 10 | e-resize यह दर्शाता है कि बॉक्स के किनारे को दाएं (पूर्व) ले जाया जा सकता है |
| 11 | ew-resize यह एक द्विदिश रिसाइज़ कर्सर दर्शाता है |
| 12 | grab यह दर्शाता है कि कुछ पकड़ा जा सकता है |
| 13 | grabbing यह दर्शाता है कि कुछ पकड़ा जा रहा है |
| 14 | help यह दर्शाता है कि मदद उपलब्ध है |
| 15 | move यह दर्शाता है कि कुछ मूव किया जाना है |
| 16 | n-resize यह दर्शाता है कि बॉक्स के किनारे को ऊपर (उत्तर) ले जाया जा सकता है |
| 17 | ne-resize यह दर्शाता है कि बॉक्स के किनारे को ऊपर और दाएं (उत्तर/पूर्व) ले जाया जा सकता है |
| 18 | nesw-resize यह एक द्विदिश रिसाइज़ कर्सर दर्शाता है |
| 19 | ns-resize यह एक द्विदिश रिसाइज़ कर्सर दर्शाता है |
| 20 | nw-resize यह दर्शाता है कि बॉक्स के किनारे को ऊपर और बाएं (उत्तर/पश्चिम) ले जाया जा सकता है |
| 21 | nwse-resize यह एक द्विदिश रिसाइज़ कर्सर दर्शाता है |
| 22 | no-drop यह दर्शाता है कि ड्रैग किया गया आइटम यहां ड्रॉप नहीं किया जा सकता |
| 23 | none एलिमेंट के लिए कोई कर्सर रेंडर नहीं होता |
| 24 | not-allowed यह दर्शाता है कि अनुरोधित एक्शन एक्जीक्यूट नहीं होगा |
| 25 | pointer यह एक पॉइंटर है और लिंक को दर्शाता है |
| 26 | progress यह दर्शाता है कि प्रोग्राम व्यस्त है (प्रगति पर है) |
| 27 | row-resize यह दर्शाता है कि रो को लंबवत रूप से रिसाइज़ किया जा सकता है |
| 28 | s-resize यह दर्शाता है कि बॉक्स के किनारे को नीचे (दक्षिण) ले जाया जा सकता है |
| 29 | se-resize यह दर्शाता है कि बॉक्स के किनारे को नीचे और दाएं (दक्षिण/पूर्व) ले जाया जा सकता है |
| 30 | sw-resize यह दर्शाता है कि बॉक्स के किनारे को नीचे और बाएं (दक्षिण/पश्चिम) ले जाया जा सकता है |
| 31 | text यह टेक्स्ट को दर्शाता है जिसे चुना जा सकता है |
| 32 | URL कस्टम कर्सर्स के लिए URLs की कॉमा-स्पेरेटेड लिस्ट जिसमें अंत में एक जेनेरिक कर्सर फेल-सेफ के रूप में होता है |
| 33 | vertical-text यह वर्टिकल टेक्स्ट को दर्शाता है जिसे चुना जा सकता है |
| 34 | w-resize यह दर्शाता है कि बॉक्स के किनारे को बाएं (पश्चिम) ले जाया जा सकता है |
| 35 | wait यह दर्शाता है कि प्रोग्राम व्यस्त है |
| 36 | zoom-in यह दर्शाता है कि कुछ ज़ूम इन किया जा सकता है |
| 37 | zoom-out यह दर्शाता है कि कुछ ज़ूम आउट किया जा सकता है |
| 38 | initial यह cursor प्रॉपर्टी को उसके डिफ़ॉल्ट मान पर सेट करता है। |
| 39 | inherit यह अपने पैरेंट एलिमेंट से cursor प्रॉपर्टी इनहेरिट करता है। |
CSS cursor प्रॉपर्टी को लागू करने का निम्नलिखित उदाहरण है:
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin: 5px; float: left; } #one { background-color: beige; } #two { background-color: lavender; } .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nw-resize {cursor: nw-resize;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} </style></head> <body> <div id="one"> <div class="nw-resize">left corner</div><div class="n-resize">up</div> <div class="ne-resize">right corner</div> </div> <div id="two"> <div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div> </div> </body> </html>
आउटपुट
