CSS Cursor

किसी store में घुसने की कल्पना करें जहाँ हर door एक जैसा दिखता है, इसलिए आप कभी नहीं बता सकते कि कौन-सा खुलता है और कौन-सा locked है जब तक आप उसे धक्का न दें। cursor property हर doorway के ऊपर वह छोटा visual sign है। यह mouse pointer की shape बदल देता है ताकि यह hint दे सके कि क्या होगा, एक hand का मतलब है आप click कर सकते हैं, एक text beam का मतलब है आप type कर सकते हैं, और एक crossed-out circle का मतलब है action blocked है। हर interactive element के लिए सही cursor set करना visitors को चुपचाप बताता है कि क्या clickable है इससे पहले कि वे कोशिश भी करें, जो एक interface को ज़्यादा predictable और trustworthy महसूस कराता है।

In this page:

Standard Cursor Values
Custom Cursor Images
Buttons पर cursor: pointer
Disabled Elements के लिए cursor: not-allowed
Interactive States और Overlays पर Cursor

Syntax

css

selector {
  cursor: pointer | default | text | move | not-allowed;
}

Standard Cursor Values

CSS pointer और default से आगे कई built-in cursor keywords define करता है, जिनमें text, move, grab, help, wait, crosshair, और ns-resize जैसे directional resize cursors शामिल हैं। सही cursor keyword चुनना users को यह बताने का एक छोटा लेकिन meaningful signal है कि कोई element click करने से पहले क्या करता है।

Note:

किसी tooltip वाले elements पर cursor: help इस्तेमाल करें ताकि users जान सकें कि hover करने से ज़्यादा जानकारी मिलेगी।
Accepted values:
auto — browser context से चुनता है (initial)
pointer | default — links के लिए hand | normal arrow
text — text के लिए एक I-beam
move — चार-दिशा arrows
not-allowed — एक forbidden sign
grab | grabbing — draggable
wait | progress — busy states
crosshair | help | zoom-in | zoom-out — precision, help और zoom
ns-resize | ew-resize | nwse-resize — directional resize cursors
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: crosshair या wait जैसी exotic cursor values को उनके expected context के बाहर ज़्यादा इस्तेमाल करना users को confuse कर सकता है कि interface क्या कर रहा है।

उदाहरण: Standard Cursor Values

css

<style>
.help { cursor: help; background: #eef; padding: 6px 12px; display: inline-block; }
.move { cursor: move; background: #efe; padding: 6px 12px; display: inline-block; }
.grab { cursor: grab; background: #fee; padding: 6px 12px; display: inline-block; }
</style>
<span class="help">Help</span>
<span class="move">Move</span>
<span class="grab">Grab</span>

Custom Cursor Images

cursor एक या ज़्यादा image URLs accept करता है जिनके बाद एक ज़रूरी fallback keyword आता है, आपको एक branded custom cursor इस्तेमाल करने देते हुए फिर भी gracefully degrade करते हुए। अगर कोई भी image URL सफलतापूर्वक load नहीं होता, तो browser चुपचाप list के आख़िर में ज़रूरी keyword पर fall back हो जाता है।

Note:

custom cursor images को छोटा रखें, लगभग 32 by 32 pixels, ताकि वे crisply render हों और जल्दी load हों।
Accepted values:
cursor: url(<image>), <fallback> — custom image
cursor: url(<image>) x y, <fallback> — hotspot set करता है
fallback keyword — हमेशा आख़िर में ज़रूरी
image formats — .cur, .png, .svg common हैं

Warning: हमेशा किसी custom cursor declaration को pointer जैसे standard keyword से खत्म करें, बिना किसी fallback के अगर image fail हो जाए तो cursor चुपचाप गायब हो जाता है।

उदाहरण: Custom Cursor Images

css

<style>
.box {
  cursor: url('custom-cursor.png'), pointer;
  background: lightblue;
  padding: 20px;
}
</style>
<div class="box">Falls back to pointer if the image fails</div>

Buttons पर cursor: pointer

pointer सबसे common cursor value है, किसी भी clickable चीज़ के ऊपर एक hand icon दिखाते हुए, और यह styled divs और spans जैसे non-native interactive elements पर खासतौर पर ज़रूरी है जो buttons की तरह act करते हैं।

Note:

Native button और a elements ज़्यादातर browsers में पहले से default रूप से pointer दिखाते हैं, लेकिन इसे explicitly जोड़ना आपकी stylesheet में intent को साफ़ तरीके से document करता है।
Accepted values:
cursor: pointer — एक hand, clickable signal देता है
cursor: auto — default, browser तय करता है
cursor: default — arrow
नोट: इसे सिर्फ genuinely interactive elements पर set करें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: cursor: pointer set करना किसी element को keyboard accessible नहीं बनाता या click handler नहीं जोड़ता, यह सिर्फ visual hint बदलता है।

उदाहरण: cursor: pointer on Buttons

css

<style>
.fake-button {
  cursor: pointer;
  background: royalblue;
  color: white;
  display: inline-block;
  padding: 10px 20px;
}
</style>
<div class="fake-button">Styled div acting as a button</div>

Disabled Elements के लिए cursor: not-allowed

not-allowed एक circle के साथ एक line दिखाता है, साफ़ तरीके से यह बताते हुए कि कोई element मौजूद है लेकिन इस समय उसके साथ interact नहीं किया जा सकता, आमतौर पर disabled form controls के साथ जोड़ा जाता है।

Note:

disabled buttons पर cursor: not-allowed को reduced opacity के साथ combine करें ताकि disabled state visually और cursor दोनों से साफ़ हो।
Accepted values:
cursor: not-allowed — forbidden sign
cursor: default — plain arrow
pointer-events: none — सभी clicks नज़रअंदाज़ करता है (सावधानी से इस्तेमाल करें)
:disabled — जोड़ने के लिए selector

Warning: Native disabled buttons ज़्यादातर browsers में automatically not-allowed दिखाते हैं, इसे किसी non-disabled element पर manually set करना एक false signal भेज सकता है।

उदाहरण: cursor: not-allowed for Disabled Elements

css

<style>
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
<button disabled>Can't click me</button>

Interactive States और Overlays पर Cursor

आप :hover जैसे pseudo-classes से cursor को dynamically बदल सकते हैं, या इसे loading screens या modal backdrops जैसे full-page overlays पर globally लागू कर सकते हैं। hover पर एक cursor change अक्सर इकलौता visual cue होता है कि एक otherwise plain-looking element असल में clickable है।

Note:

किसी full-page loading overlay पर cursor: wait set करें ताकि users समझें कि interface कुछ process कर रहा है।
Accepted values:
cursor: grab — draggable के ऊपर hover करना
cursor: grabbing — drag करते समय
cursor: zoom-in | zoom-out — image overlays के लिए
cursor: pointer — clickable overlays के लिए
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: किसी parent overlay पर set किया गया cursor उसके children द्वारा inherit किया जाता है जब तक कोई child खुद explicitly cursor को override न करे।

उदाहरण: Cursor on Interactive States and Overlays

css

<style>
.card {
  background: lightblue;
  padding: 10px;
  margin-bottom: 8px;
}
.card:hover {
  cursor: pointer;
}
.overlay {
  background: #333;
  color: white;
  padding: 10px;
  cursor: wait;
}
</style>
<div class="card">Hover to see the pointer cursor</div>
<div class="overlay">Full-page loading overlay</div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS At-Rules Next Lesson → CSS Will Change

CSS Cursor

Standard Cursor Values

Custom Cursor Images

Buttons पर cursor: pointer

Disabled Elements के लिए cursor: not-allowed

Interactive States और Overlays पर Cursor

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code