हो सकता है कि कर्सर परिवर्तन दुनिया में सबसे लोकप्रिय संपत्ति न हो, लेकिन यह अभी भी डेवलपर्स के लिए एक उपयोगी उपकरण है। जबकि ब्राउज़र कुछ वस्तुओं के लिए कर्सर को स्वचालित रूप से बदल देंगे, जैसे लिंक और कुछ खींचने योग्य आइटम, डेवलपर्स विशेष रूप से अपने वांछित कर्सर को निर्दिष्ट करने से बेहतर परिणाम प्राप्त कर सकते हैं।
CSS में माउस प्वाइंट बदलें
कर्सर की उपस्थिति को कर्सर CSS संपत्ति द्वारा नियंत्रित किया जाता है। जब उपयोगकर्ता ऑब्जेक्ट पर माउस ले जाता है तो यह प्रॉपर्टी कर्सर के प्रकार को नियंत्रित करती है। उदाहरण के लिए, नीचे दिए गए वर्ग से जुड़ी वस्तु पर माउस ले जाने से एक चार-दिशा खींचने वाला तीर उत्पन्न होगा:
.cursor { cursor: move;} ऑब्जेक्ट पर माउस ले जाने पर, उपयोगकर्ता को नीचे जैसा कर्सर दिखाई देगा।
सीएसएस में मानक कर्सर विकल्प
आप अपने कर्सर के उपयोग के लिए कई प्रकार के कर्सर विकल्प सेट कर सकते हैं। ध्यान दें कि आप सूची में जो "एन," "एस," "डब्ल्यू," और "ई" देखते हैं, वे उत्तर, दक्षिण, पूर्व और पश्चिम की मुख्य दिशाओं को संदर्भित करते हैं। उदाहरण के लिए, 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 में हो, ब्राउज़र द्वारा समर्थित नहीं है। लेकिन पारदर्शी पीएनजी आज बाजार के सभी लोकप्रिय वेब ब्राउज़र में काम करते हैं। एसवीजी फ़ायरफ़ॉक्स में उतने विश्वसनीय नहीं हैं, लेकिन अन्य ब्राउज़रों में अच्छी तरह से काम करते हैं।
डिफ़ॉल्ट रूप से, कर्सर का "हॉट स्पॉट" छवि के ऊपरी-बाएँ कोने पर सेट हो जाएगा। एक अलग "हॉट स्पॉट" को इंगित करने के लिए, अपने कर्सर कॉल में एक (एक्स, वाई) समन्वय जोड़ी निर्दिष्ट करें। नीचे दिया गया यह उदाहरण हॉट स्पॉट को (3,3) के रूप में सेट करेगा, ऊपर बाईं ओर (0,0) के रूप में उपयोग करके।
.cursor {cursor: url(cursor.svg) 3 3, pointer;} निष्कर्ष:इन विशेषताओं का उपयोग करना
यदि आप एक वेबसाइट विकसित कर रहे हैं, तो आप इन सीएसएस गुणों को अपनी साइट पर किसी भी ऑब्जेक्ट में जोड़ सकते हैं ताकि ऑब्जेक्ट पर माउस करते समय उपयोगकर्ता द्वारा देखे जाने वाले कर्सर को बदल दिया जा सके। यदि आप अधिक साहसी हैं, तो आप किसी वेबसाइट के शीर्ष पर मनमाने ढंग से सीएसएस निष्पादित करने के लिए स्टाइलस, टैम्परमोन्की, या ग्रीसमोन्की जैसे ब्राउज़र एक्सटेंशन का भी उपयोग कर सकते हैं। इस तरह, आप जब चाहें और जहां चाहें अपना खुद का कस्टम कर्सर दिखा सकते हैं।