CSS Cursor Property

Introduction to CSS Cursor Property

जब आप किसी link पर mouse cursor ले जाते है तो आपको hand cursor show होता है और जब आप किसी text पर mouse cursor ले जाते है तो text cursor show होता है। बाकी दूसरे HTML elements पर भी arrow, move आदि cursors show होते है।

Cursor की मदद से user को पता चल जाता है की जिस element पर cursor ले जाया गया है वह किस प्रकार behave करेगा। उदाहरण के लिए hand cursor से user को पता चल जाता है की text एक link है जिसे click करने पर नया page खुलेगा।

Cursors किसी भी web application को interactive बनाने के लिए बहुत उपयोगी होते है। CSS आपको mouse cursor की appearance को control करने की ability provide करती है। यह कार्य CSS में available cursor property द्वारा किया जाता है।

Cursor property के द्वारा यह define किया जाता है की जब mouse cursor को किसी element पर ले जाया जाएगा तो किस प्रकार का cursor show होगा। Cursor property को आप किसी भी HTML element के लिए अपनी आवश्यकता के अनुसार define कर सकते है।

Syntax of CSS Cursor Property

Cursor property का general syntax निचे दिया जा रहा है।

cursor : cursor-type;

जैसा की आप ऊपर दिए गए syntax में देख सकते है cursor property की value के रूप में cursor type का नाम दिया जाता है। इसके लिए बहुत से cursor types avaialble जो value के रूप में define किये जा सकते है। इनके बारे में निचे बताया जा रहा है।

• auto - इस value से browser automatically निर्धारित करता है की कौनसा cursor किस element के लिए show करना है।
• default - इस value से सभी elements के साथ उन से सम्बंधित default cursors use किये जाते है।
• none - इस value से किसी भी प्रकार का cursor नहीं show होता है।
• initial - यह value cursor की value default value के लिए set कर देती है।
• inherit - इस value से cursor की value वही set हो जाती है जो parent element की होती है।
• context-menu - इस value से एक context menu cursor show होता है जो यह बताता है की context menu available है। इस value को उन elements के लिए use किया जाना चाहिए जिनके लिए context menu define की गयी हो।
• help - यह value help cursor show करती है। Help cursor से user को पता चलता है की किसी element से सम्बंधित help available है।
• pointer - यह value hand cursor show करती है। Hand cursor mostly links के लिए show किया जाता है।
• progress - यह value एक progress indicator cursor show करती है। Progress indicator cursor यह बताता है की process progress में है। जैसे की किसी element का load होना आदि।
• wait - यह value wait cursor show करती है। Wait cursor बताता है की user को wait करना चाहिए।
• cell - यह value cell (column) cursor show करती है। Cell cursor से user को पता चलता है की किसी column को select किया जा सकता है।
• crosshair - यह value एक crosshair cursor show करती है।
• text - यह value text cursor show करती है। Text cursor indicate करता है की text को select किया जा सकता है।
• vertical-text - यह value vertical text selector cursor show करती है। इस text cursor से user को पता चलता है की vertical text को select किया जा सकता है।
• alias - यह value alias (shortcut) cursor show करती है। Alias cursor बताता है की element का shortcut create किया जा सकता है।
• copy - यह value copy cursor show करती है। Copy cursor से user को पता चलता है की element को copy किया जा सकता है।
• move - यह value move cursor show करती है। Move cursor से user को पता चलता है की element को move किया जा सकता है।
• no-drop - यह value no drop cursor show करती है। इस cursor से पता चलता है की current location पर element को drop नहीं किया जा सकता है।
• not-allowed - यह value not allowed cursor show करती है। Not allowed cursor से user को पता चलता है की element के साथ कोई action नहीं लिया जा सकता है।
• all-scroll - यह value all scroll cursor show करती है। All scroll cursor से user को पता चलता है की सभी sides में scroll किया जा सकता है।
• col-resize - यह value column resize cursor show करती है। इस cursor से user को पता चलता है की column को resize किया जा सकता है।
• row-resize - यह value row resize cursor show करती है। इस cursor से user को पता चल जाता है की row को resize किया जा सकता है।
• n-resize - यह value north resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को north में resize किया जा सकता है।
• e-resize - यह value east resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को east में resize किया जा सकता है।
• s-resize - यह value south resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को south में resize किया जा सकता है।
• w-resize - यह value west resize cursor show करती है। इस cursor से user को पता चलता है की किसी element को west में resize किया जा सकता है।
• ne-resize - यह value north east resize cursor show करती है। इस cursor से user को पता चल जाता है की element को north east में move किया जा सकता है।
• nw-resize - यह value north west resize cursor show करती है। इस cursor से user को पता चल जाता है की element को north west में resize किया जा सकता है।
• se-resize - यह value south east resize cursor show करती है। इस cursor से user को पता चलता है की element को south east में move किया जा सकता है।
• sw-resize - यह value south west resize cursor show करती है। इस cursor से user को पता चलता है की element को south west में move किया जा सकता है।
• ew-resize - यह value east west resize cursor show करती है। इस cursor से user को पता चलता है की element को east west में move किया जा सकता है।
• ns-resize - यह value north south resize cursor show करती है। इस cursor से user को पता चलता है की element को north और south में move किया जा सकता है।
• zoom-in - यह value zoom in cursor show करती है। Zoom in cursor से user को पता चलता है की element में zoom in किया जा सकता है।
• zoom-out - यह value zoom out cursor show करती है। Zoom out cursor से user को पता चलता है की element में zoom out किया जा सकता है।
• grab - यह value grab cursor show करती है। Grab cursor से user को पता चलता है की element को grab किया जा सकता है।
• grabbing - यह value grabbing cursor show करती है। Grabbing cursor से user को पता चलता है की element को grab किया जा रहा है।

Example of CSS Cursor Property

CSS cursor property का उदाहरण निचे दिया जा रहा है।

<html>

<head>
<title>CSS Cursor Property Demo</title>
</head>

<body>
<p>This is a paragraph. When you hover over this paragraph hand cursor will be shown. Default cursor on a paragraph is text cursor. But on this paragraph cursor is changed using CSS cursor property.</p>
</body>

</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।