CSS Pointer Events
किसी shop window display की कल्पना करें, आप glass के पीछे की हर चीज़ साफ़ देख सकते हैं, लेकिन आप glass पर चाहे कितना भी ज़ोर लगाएँ, आप अंदर के items को असल में छू नहीं सकते।
pointer-events किसी page पर elements के लिए भी वैसे ही काम करता है। इसे none set करना किसी element को glass बना देता है, यह पूरी तरह visible रहता है लेकिन clicks, hovers, और दूसरे mouse interactions सीधे इसके through उसके नीचे बैठी किसी भी चीज़ तक चले जाते हैं।
यह decorative overlays, buttons के ऊपर layered icons, और disabled states के लिए खासतौर पर उपयोगी है जहाँ आप चाहते हैं कि visuals बने रहें लेकिन interaction गायब हो जाए।
In this page:
Syntax
selector {
pointer-events: auto | none;
}none Value
pointer-events: none किसी element को pointer interaction tree से पूरी तरह हटा देता है, इसलिए clicks और hovers इसके through उसके नीचे stacked किसी भी element तक चले जाते हैं।
Note:
- buttons के अंदर रखे decorative icons पर pointer-events: none इस्तेमाल करें ताकि icon पर hover करना अभी भी सही तरीके से button पर hover करने की तरह register हो।
- Accepted values:
- auto — normal pointer behavior (default)
- none — element pointer events नज़रअंदाज़ करता है और उन्हें through जाने देता है
- SVG-only values — visiblePainted, fill, stroke, all
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
pointer-events: none वाला एक element click, hover, या drag events fire नहीं कर सकता भले ही JavaScript सीधे उस पर एक event listener जोड़ दे।
उदाहरण: The none Value
<style>
.icon {
pointer-events: none;
}
</style>
<button><span class="icon">🔍</span> Search</button>auto Value
pointer-events: auto standard interactive behavior restore करता है और ज़्यादातर elements के लिए default है, लेकिन यह खासतौर पर किसी parent के अंदर एक child को दोबारा enable करने के लिए उपयोगी हो जाता है जिस पर pointer-events: none लागू है।
Note:
- एक otherwise non-interactive disabled overlay के अंदर एक specific close button पर pointer-events: auto इस्तेमाल करें ताकि सिर्फ वही एक action available रहे।
- Accepted values:
- auto — normal mouse और touch behavior (initial value)
- none — element pointer events नज़रअंदाज़ करता है
- visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all — SVG-specific values
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
pointer-events: auto सिर्फ उस element को दोबारा enable करता है जिस पर यह सीधे लागू है, यह normal CSS inheritance से आगे कोई special behavior cascade नहीं करता।
उदाहरण: The auto Value
<style>
.disabled-overlay {
pointer-events: none;
background: rgba(0,0,0,0.4);
padding: 20px;
}
.close-btn {
pointer-events: auto;
}
</style>
<div class="disabled-overlay">
<button class="close-btn">Close (still works)</button>
</div>किसी Element पर Clicks Disable करना
pointer-events: none किसी interactive-looking element को layout से हटाए या hide किए बिना visually disable करने का एक lightweight तरीका है, disabled attribute के उलट जो सिर्फ form controls पर लागू होता है।
Note:
- buttons की तरह act करने वाले custom clickable divs के लिए, pूरी तरह disabled appearance के लिए pointer-events: none को reduced opacity और cursor: not-allowed के साथ combine करें।
- Accepted values:
- auto — normal mouse और touch behavior (initial value)
- none — element pointer events नज़रअंदाज़ करता है
- visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all — SVG-specific values
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
pointer-events: none किसी focusable element के keyboard activation को नहीं रोकता, पूरी तरह disable करते समय हमेशा इसे tabindex=-1 से tab order से भी हटाएँ।
उदाहरण: Disabling Clicks on an Element
<style>
.fake-disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
background: lightgray;
padding: 12px;
}
</style>
<div class="fake-disabled">Visually disabled without the disabled attribute</div>Overlay Elements
Full page overlays, जैसे modal backdrops या loading screens, को अक्सर अपने नीचे की हर चीज़ के साथ interaction block करने की ज़रूरत होती है जबकि वे खुद clickable रहें, icon pattern से उल्टा use case।
Note:
एक modal backdrop आमतौर पर pointer-events: auto (default) रखता है ताकि उसे click करने से modal बंद हो सके, जबकि content के ऊपर के decorative elements none इस्तेमाल करते हैं।
Warning:
अगर किसी backdrop पर गलती से pointer-events: none है, तो clicks इसके through पीछे के page content तक चले जाएँगे, modal का click-to-close behavior तोड़ते हुए।
उदाहरण: Overlay Elements
<style>
.backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
color: white;
pointer-events: auto;
}
</style>
<div class="backdrop">Clickable, so clicking it can close the modal</div>SVG पर pointer-events
pointer-events originally एक SVG-only property थी जिसमें visiblePainted और all जैसी अतिरिक्त values थीं, यह control करते हुए कि fill, stroke, या bounding box areas pointer interaction को respond करें या नहीं।
Note:
बिना fill वाली किसी SVG shape पर pointer-events: all इस्तेमाल करें ताकि वह फिर भी clicks को respond करे भले ही वह otherwise pointer detection के लिए invisible होती।
Warning:
visiblePainted और fill जैसी values SVG-specific हैं और SVG के बाहर regular HTML elements पर लागू होने पर कोई असर नहीं करतीं।
उदाहरण: pointer-events on SVG
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="lightblue" stroke="steelblue" stroke-width="2" pointer-events="all"></circle>
</svg>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- किसी पूरे disabled form पर pointer-events: none set करना बिना यह realize किए कि यह screen reader interaction cues भी block करता है, हमेशा इसे aria-disabled के साथ जोड़ें।
- यह भूल जाना कि एक child element pointer-events: auto restore करके फिर से clickable बन सकता है भले ही उसके parent ने pointer-events: none set किया हो।
- किसी button को disable करने के इकलौते तरीके के रूप में pointer-events: none इस्तेमाल करना, जो button को keyboard से focus और activate होने से नहीं रोकता।
चैप्टर सारांश
- pointer-events: none किसी element को visually present रखते हुए mouse और pointer interactions के लिए invisible बना देता है।
- pointer-events: auto default है और normal interactivity restore करता है, किसी disabled parent के अंदर किसी specific child को दोबारा enable करने के लिए उपयोगी।
- pointer-events: all किसी SVG element को उसकी fill या stroke visibility चाहे जो भी हो हमेशा pointer events को respond करने पर मजबूर करता है।
ब्राउज़र सपोर्ट
pointer-events हर modern browser में सभी elements पर supported है; non-SVG HTML elements पर support SVG support से थोड़ी बाद में आया लेकिन अब universal है।
🔒
Chapter Quiz — Complete all 22 topics to unlock
0/22 topics done
Complete these topics first:
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Vertical Navbar
- CSS Horizontal Navbar
- CSS Dropdowns
- CSS Advanced Dropdowns
- CSS Image Gallery
- CSS Image Sprites
- CSS Attribute Selectors
- CSS Forms
- CSS Counters
- CSS Specificity
- CSS Specificity Hierarchy
- CSS Variables
- CSS !important
- CSS Box Sizing
- CSS Media Queries
- CSS Pointer Events
- CSS Outline