CSS Cursor Property in HTML (In Hindi)

 CSS Cursor Property

आपने Web Pages के अलग-अलग Text पर Mouse Cursor को बदलते हुए देखा होगा। आमतौर पर Cursor एक Arrow में दिखाई देता हैं। और किसी Link पर यह Pointer यानि Hand में बदल जाता हैं। 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 हैं और मुझे संबंधित पेज पर पहुँचा देगी।

Difference Between CSS Cursor 

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

प्रत्येक 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 Cursor

• 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 Cursor

• 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 – यह एक मोटा Plus का चिन्ह होता हैं। जो दर्शाता हैं कि Table Cell को Select किया जा सकता हैं।
• Cross Hair – इसमे एक बडा और पतला 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 करके छोटा किया जा सकता हैं।

<!DOCTYPE html>
<html>
<head>
<title>CSS Cursor Example</title><body>
<p>नीचे कुछ Cursor Types के बारे में बताया जा रहा हैं। इनके ऊपर माउस को ले जाकर देख सकते हैं। इसी प्रकार सभी Cursor को Try करके देख सकते हैं।</p>
<div>pointer </div>
<div>move</div>
<div>wait</div>
<div>all-scroll</div>
</body>
</html>
<div>default cursor</div>

OUTPUT-

#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

{cursor: url(“image url”), default;}

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Image Cursor Examples</title><style type=”text/css”>
a {
cursor: url(myhand.png), default;
}
</style>
<body>
<p>नीचे एक Link दी जा रही हैं जिसके ऊपर माऊस करसर को ले जाकर Custom Cursor को देख सकते हैं।</p>
<a>हाथ देखने के लिए करसर को ऊपर लाए</a>
</body>
</html>

OUTPUT-

<<Prev  ||  Next >>

For Any Doubt Clear on Telegram Discussion Group

Join Us On Social Media

YouTube Channel Link 

Telegram Link

Facebook Page Link

InstaGram Link 

For Any Query @8604799387