CSS cursor Property क्या हैं पूरी जानकारी हिंदी में?

इस Tutorial में हम आपको CSS cursor Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.

CSS Cursor Property का परिचय

आपने Webpages के अलग-अलग Text पर Mouse Cursor को बदलते हुए देखा होगा. आमतौर पर Cursor एक Arrow में दिखाई देता हैं. और किसी Link पर यह Pointer यानि Hand में बदल जाता हैं.

Note:- अपने Mouse को हिलाए और स्क्रीन पर ध्यान दीजिए. कैसा Cursor दिखाई दे रहा हैं. और इसे अलग-अलग प्रकार के Text (Image, Links, Paragraph Text) पर Hover कीजिए.

Mouse Cursor को Customize भी किया जा सकता हैं और इसे उपलब्ध Cursor Type में से अपनी पसंदानुसार बदला जा सकता हैं. या फिर अपनी पसंद की किसी Image को भी Mouse Cursor बना सकते हैं.

Mouse Cursor को Customize करने के लिए CSS Cursor Property को बनाया गया हैं. जिसके द्वारा Mouse Cursor को Change किया जा सकता हैं.

Cursors की मदद से Text अर्थपूर्ण दिखाई देता हैं और Mouse Cursor की बनावट से ही Users को पता चल जाता हैं कि यह Text किस प्रकार का हैं और किस प्रकार Behave करेगा. जैसे एक Link Text पर Cursor एक Pointer में बदल जाता हैं. इससे Users को पता चलता हैं कि यह एक Link हैं और मुझे संबंधित पेज पर पहुँचा देगी.

CSS Cursor के विभिन्न प्रकार

Content के अलग-अलग प्रकार को दिखाने के लिए कई प्रकार के Mouse Cursor को उनके कार्य और बनावट के आधार पर 6 भागों में बांटा गया हैं.

Note:- नीचे हम Cursor के अलग-अलग प्रकार के बारे में बता रहे हैं. आप प्रत्येक Cursor Type के ऊपर Mouse Cursor को ले जाकर उसकी बनावट देख सकते हैं.

1. General Cursors
2. Links & Status Cursors
3. Selection Cursors
4. Drag & Drop Cursors
5. Resizing & Scrolling Cursors
6. Zooming Cursors

General Cursors

• auto – इस Situation में Browser फैंसला करता हैं कि किस Element पर कौनसा Cursor Show करना हैं.
• default – इस Value से सभी Elements पर Default Cursor Show होता हैं.स
• none – कोई Cursor Show नही होगा.
• initial – Default Cursor Show होता हैं.
• inherit – Parent Element का Cursor Show होता हैं.

Links & Status Cursors

• pointer – इसमे एक हाथ दिखाई देता हैं जो Link को दर्शाता हैं.
• help – इसमें Arrow के साथ एक Question Mark दिखाई देता हैं, जो बताता हैं कि संबंधित Element के लिए Help उपलब्ध हैं.
• context-menu – यह Cursor दर्शाता हैं कि संबंधित Element की एक सहायक मेनु उपलब्ध हैं.
• progress – इस Cursor में Arrow के साथ एक चक्कर दिखाई देता हैं. जो दर्शाता हैं कि कोई Program Background में Busy हैं.
• wait – इसमें Arrow हट जाती हैं सिर्फ चक्कर घूमता रहता हैं. जो दर्शाता हैं कि Program Busy है. आप कुछ नही कर सकते हैं इंतजार के अलावा.

Selection Cursors

• cell – यह एक मोटा Pluc का चिन्ह होता हैं. जो दर्शाता हैं कि Table Cell को Select किया जा सकता हैं.
• crosshair – इसमे एक बडा और पतला Plus का चिन्ह दिखाई देता हैं.
• text – इसमें Capital I के जैसा चिन्ह दिखाई देता है, जो साधारण Text को दर्शाता हैं.
• vertical-text – इसमे Text Cursor आडा दिखाई देता हैं.

Drag & Drop Cursors

• alias – इस Cursor को आप Desktop Icons पर भी देख सकते हैं. यह किसी Element की Shortcut को दर्शाता हैं और Users को बताता हैं कि Element का Shortcut बनाया जा सकता हैं.
• move – इस Cursor में चारों दिशाओं को दर्शाती तीर होती हैं. जो दर्शाती हैं कि Element को इधर-उधर सरका सकते हैं.
• copy – इसमें Arrow के साथ + का चिन्ह दिखाई देता हैं जो दर्शाता हैं कि Element को Copy किया जा सकता हैं.
• no-drop – यह Cursor दर्शाता हैं कि यहाँ Items को Drop नहीं कर सकते हैं.
• not-allowed – यह Cursor दर्शाता हैं कि आप यहाँ कुछ नही कर सकते हैं.
• grab – यह दर्शाता हैं कि Items को पकडकर सरका सकते हैं.
• grabbing – यह दर्शाता हैं कि Items को सरकाया जा रहा हैं.

Resizing & Scrolling Cursors

• all-scroll – यह Cursor कुछ-कुछ move Cursor के समान ही होता हैं. जो दर्शाता हैं कि Items को चारों तरफ Scroll किया जा सकता हैं.
• col-resize – यह Cursor दर्शाता हैं कि Columns को दांए-बांए तरफ Resize किया जा सकता हैं.
• row-resize – यह Cursor दर्शाता हैं कि Rows को ऊपर-नीचे की तरफ Resize किया जा सकता हैं.
• n-resize – यह Cursor दर्शाता हैं कि किसी Item को North दिशा यानि ऊपर की तरफ खींचा जा सकता हैं.
• e-resize – यह Cursor दर्शाता हैं कि Item को East दिशा यानि दांए तरफ खींचा जा सकता हैं.
• s-resize – यह Cursor दर्शाता हैं कि Item को South दिशा यानि नीचे की तरफ खींचा जा सकता हैं.
• w-resize – यह Cursor दर्शाता हैं कि Item को West दिशा यानि बांए तरफ खींचा जा सकता हैं.
• ne-resize – यह Cursor दर्शाता हैं कि Item को North East दिशा यानि ऊपर-दांए तरफ खींचा जा सकता हैं.
• nw-resize – यह Cursor दर्शाता हैं कि Item को North West दिशा यानि ऊपर-बांए तरफ खींचा जा सकता हैं.
• se-resize – यह Cursor दर्शाता हैं कि Item को South East दिशा यानि नीचें-दांए तरफ खींचा जा सकता हैं.
• sw-resize – यह Cursor दर्शाता हैं कि Item को South west दिशा यानि नीचे‌-बांए तरफ खींचा जा सकता हैं.
• ew-resize – यह Cursor दर्शाता हैं कि Item को East West दिशा यानि दांए-बांए खींचा जा सकता हैं.
• ns-resize – यह Cursor दर्शाता हैं कि Item को North South दिशा यानि ऊपर-नीचे खींचा जा सकता हैं.
• nesw-resize – यह Cursor दर्शाता हैं कि Item को चारों दिशाओं में अलग-अलग खींचा जा सकता हैं.
• nwse-resize – यह Cursor भी दर्शाता हैं कि Item को चारों तरफ अलग-अलग खींचा जा सकता हैं.

Zooming Cursors

• zoom in – यह दर्शाता हैं कि Items को Zoom In करके बडा किया जा सकता हैं.
• zoom out – यह दर्शाता हैं कि Items को Zoom Out करके छोटा किया जा सकता हैं.

इसे Try कीजिए

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

Image को Cursor बनाना – How to Make a Image Cursor in Hindi?

आप उपलब्ध Cursor के अलावा अपना खुद का Custom Cursor भी Design कर सकते हैं. यह कार्य CSS Cursor की url Value द्वारा किया जाता हैं.

Image Cursor को एक उपलब्ध Cursor Type (Generic Cursor) के साथ Define किया जाता हैं. ताकि Image Cursor उपलब्ध नही होने पर इसे दिखाया जा सके.

Image Cursor को बनाते समय Browser Compatibility को ध्यान में रखा जाना चाहिए. क्योंकि Image Cursor के लिए आप सिर्फ .cur, .png, .gif, .jpg और .ani Format में Image को बना सकते हैं.

Image Cursor Syntax

इसे Try कीजिए

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Cursor Properties के बारे में पूरी जानकारी दी हैं. आपने विभिन्न प्रकार CSS Cursor के बारे में जाना और उनका उपयोग करना भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital