परिचय
`cursor` प्रॉपर्टी माउस कर्सर का प्रकार निर्दिष्ट करती है जो एलिमेंट पर होवर होने पर दिखता है।
सभी मान तालिका
| मान | विवरण | उपयोग |
|---|---|---|
| auto | ब्राउज़र तय करता है (टेक्स्ट पर I-बीम, लिंक पर हैंड, आदि) | डिफ़ॉल्ट |
| default | डिफ़ॉल्ट एरो कर्सर | रीसेट के लिए |
| none | कोई कर्सर नहीं | गेम्स, कस्टम UI |
| context-menu | कॉन्टेक्स्ट मेनू उपलब्ध | राइट-क्लिक योग्य क्षेत्र |
| help | प्रश्न चिह्न/बैलून | हेल्प बटन, टूलटिप्स |
| pointer | पॉइंटिंग हैंड (लिंक जैसा) | बटन, क्लिक करने योग्य एलिमेंट्स |
| progress | लोडिंग स्पिनर + एरो | पृष्ठभूमि लोडिंग |
| wait | आवरग्लास/स्पिनर | व्यस्त स्थिति (ब्लॉकिंग) |
| cell | सेल चयन (स्प्रेडशीट) | टेबल सेल्स |
| crosshair | क्रॉसहेयर/प्लस साइन | ड्राइंग, प्रिसिजन चयन |
| text | I-बीम (टेक्स्ट चयन) | टेक्स्ट इनपुट, एडिटेबल |
| vertical-text | लंबवत I-बीम | लंबवत टेक्स्ट |
| alias | शॉर्टकट/एलियास आइकन | ड्रैग टू क्रिएट शॉर्टकट |
| copy | कॉपी आइकन (+ साइन) | कॉपी ऑपरेशन |
| move | मूव आइकन (4-दिशा एरो) | ड्रैग-टू-मूव |
| no-drop | सर्कल में स्लैश | ड्रॉप निषिद्ध |
| not-allowed | सर्कल में स्लैश | अक्षम एलिमेंट्स |
| grab | खुला हाथ | ड्रैग करने योग्य (ग्रैब करने योग्य) |
| grabbing | बंद हाथ | सक्रिय ड्रैगिंग |
| e-resize | दाएं रिसाइज (पूर्व) | दायां एज रिसाइज |
| ne-resize | ऊपर-दाएं रिसाइज | कोना रिसाइज |
| nw-resize | ऊपर-बाएं रिसाइज | कोना रिसाइज |
| n-resize | ऊपर रिसाइज (उत्तर) | ऊपरी एज |
| se-resize | नीचे-दाएं रिसाइज | कोना रिसाइज |
| sw-resize | नीचे-बाएं रिसाइज | कोना रिसाइज |
| s-resize | नीचे रिसाइज (दक्षिण) | निचला एज |
| w-resize | बाएं रिसाइज (पश्चिम) | बायां एज |
| ew-resize | क्षैतिज रिसाइज | क्षैतिज स्प्लिटर |
| ns-resize | लंबवत रिसाइज | लंबवत स्प्लिटर |
| nesw-resize | विकर्ण रिसाइज | विकर्ण |
| nwse-resize | विकर्ण रिसाइज | विकर्ण |
| col-resize | कॉलम रिसाइज | टेबल कॉलम |
| row-resize | रो रिसाइज | टेबल रो |
| all-scroll | सभी दिशा स्क्रॉल | पैनिंग |
| zoom-in | ज़ूम इन (+ लेंस) | ज़ूम करने योग्य |
| zoom-out | ज़ूम आउट (- लेंस) | ज़ूम करने योग्य |
| <url> [x y] | कस्टम इमेज कर्सर | ब्रांडेड कर्सर |
उदाहरण
<style>
.clickable { cursor: pointer; }
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }
.disabled { cursor: not-allowed; }
.help-btn { cursor: help; }
.resizable { cursor: nwse-resize; }
.custom-cursor { cursor: url('/cursor.png') 16 16, auto; }
</style>
<button class="clickable">क्लिक करने योग्य</button>
<div class="draggable">खींचें</div>
<button class="disabled" disabled>अक्षम</button>
सर्वोत्तम अभ्यास
- क्लिक करने योग्य एलिमेंट्स पर `pointer` उपयोग करें (बटन, लिंक, कार्ड)
- अक्षम स्थिति के लिए `not-allowed`
- ड्रैग-एंड-ड्रॉप के लिए `grab`/`grabbing`
- कस्टम कर्सर के लिए फॉलबैक: `cursor: url(custom.cur), auto;`
- कर्सर इमेज: .cur, .png, .gif (32x32 या 64x64 अनुशंसित)
- हॉटस्पॉट (x y) कर्सर इमेज में क्लिक पॉइंट निर्दिष्ट करता है
