कर्सर परिवर्तन दुनिया में सबसे लोकप्रिय संपत्ति नहीं हो सकते हैं, लेकिन यह अभी भी डेवलपर्स के लिए एक उपयोगी उपकरण है। जबकि ब्राउज़र स्वचालित रूप से कुछ ऑब्जेक्ट्स के लिए कर्सर बदल देंगे, जैसे लिंक और कुछ ड्रैगेबल आइटम, डेवलपर्स अपने वांछित कर्सर को विशेष रूप से निर्दिष्ट करके बेहतर परिणाम प्राप्त कर सकते हैं।
CSS में माउस पॉइंटर बदलें
कर्सर की उपस्थिति को CSS cursor संपत्ति द्वारा नियंत्रित किया जाता है। यह संपत्ति कर्सर के प्रकार को नियंत्रित करती है जो तब प्रकट होता है जब उपयोगकर्ता ऑब्जेक्ट पर माउस ले जाता है। उदाहरण के लिए, नीचे दिए गए वर्ग से जुड़े ऑब्जेक्ट पर माउस ले जाने से एक चार-दिशात्मक ड्रैगिंग तीर उत्पन्न होगा:
.cursor { cursor: move;}
ऑब्जेक्ट पर माउस ले जाने पर, उपयोगकर्ता नीचे दिए गए कर्सर जैसा कर्सर देखेगा।
CSS में मानक कर्सर विकल्प
आपके कर्सर उपयोग के लिए सेट करने के लिए कर्सर विकल्पों की एक विस्तृत विविधता है। ध्यान दें कि सूची में आपको दिखाई देने वाले "N," "S," "W," और "E" उत्तर, दक्षिण, पूर्व, और पश्चिम की कार्डिनल दिशाओं को संदर्भित करते हैं। उदाहरण के लिए, cursor: e-resize; दाएं हाथ की ओर या "पूर्वी" तरफ एक तीर के साथ एक रिसाइज़ हैंडल दिखाता है।
.alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: grab;} .grabbing {cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .url {cursor: url(myBall.cur),auto;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;}
CSS-Tricks.com के पीछे के जादूगर क्रिस कोयियर ने CSS में विभिन्न कर्सर विकल्पों को दिखाने में मदद करने के लिए यह डूडल बनाया।
छवियों को कर्सर के रूप में उपयोग करना
कई CSS गुणों की तरह, कर्सर गुण URL विशिष्टताओं के माध्यम से विशेषताएं भी ले सकता है। उदाहरण के लिए, नीचे दिया गया वर्ग कर्सर के लिए संबद्ध छवि का उपयोग करेगा।
.cursor {cursor: url('path/to/image.png'), auto;}
बाद में ऑटो एक फॉलबैक कर्सर निर्दिष्ट करता है। ऑटो विशेषता ब्राउज़र द्वारा वर्तमान ऑब्जेक्ट के लिए आमतौर पर उपयोग किए जाने वाले कर्सर को दिखाएगी जिसके नीचे कर्सर है। आप कॉमा-सेपरेटेड सूची के साथ अतिरिक्त छवियां भी निर्दिष्ट कर सकते हैं या अपने फॉलबैक कर्सर के रूप में काम करने के लिए किसी भी कर्सर को निर्दिष्ट कर सकते हैं।
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}
किसी भी प्रकार का एनीमेशन, चाहे GIF, SVG, या PNG में, ब्राउज़रों द्वारा असमर्थित है। लेकिन पारदर्शी PNG आज बाजार में सभी लोकप्रिय वेब ब्राउज़रों में काम करते हैं। SVG फ़ायरफ़ॉक्स में उतने विश्वसनीय नहीं हैं, लेकिन अन्य ब्राउज़रों में अच्छी तरह से काम करते हैं।
डिफ़ॉल्ट रूप से, कर्सर का "हॉट स्पॉट" छवि के ऊपरी-बाएं कोने पर सेट होगा। एक अलग "हॉट स्पॉट" इंगित करने के लिए, अपने कर्सर कॉल में एक (X,Y) निर्देशांक जोड़ी निर्दिष्ट करें। नीचे दिया गया उदाहरण हॉट स्पॉट को (3,3) के रूप में सेट करेगा, ऊपरी बाएं को (0,0) के रूप में उपयोग करते हुए।
.cursor {cursor: url(cursor.svg) 3 3, pointer;}
निष्कर्ष: इन विशेषताओं का उपयोग करना
यदि आप एक वेबसाइट विकसित कर रहे हैं, तो आप अपनी साइट पर किसी भी ऑब्जेक्ट पर इन CSS गुणों को जोड़ सकते हैं ताकि जब उपयोगकर्ता ऑब्जेक्ट पर माउस ले जाए तो कर्सर बदल जाए। यदि आप अधिक साहसी हैं, तो आप Stylus, TamperMonkey, या GreaseMonkey जैसे ब्राउज़र एक्सटेंशन का उपयोग करके किसी वेबसाइट के ऊपर मनमाना CSS निष्पादित कर सकते हैं। इस तरह, आप जब चाहें और जहां चाहें अपना खुद का कस्टम कर्सर दिखा सकते हैं।
