CSS Pointer Events

Imagine a shop window display, you can see everything behind the glass clearly, but no matter how hard you press on the glass, you cannot actually touch the items inside. pointer-events works the same way for elements on a page. Setting it to none turns an element into glass, it stays fully visible but clicks, hovers, and other mouse interactions pass straight through it to whatever sits underneath. This is especially useful for decorative overlays, icons layered on top of buttons, and disabled states where you want the visuals to remain but the interaction to disappear.

In this page:

The none Value
The auto Value
Disabling Clicks on an Element
Overlay Elements
pointer-events on SVG

The none Value

pointer-events: none removes an element from the pointer interaction tree entirely, so clicks and hovers pass through it to whatever element is stacked beneath.

Note: Use pointer-events: none on decorative icons placed inside buttons so hovering the icon still correctly registers as hovering the button.

Warning: An element with pointer-events: none cannot fire click, hover, or drag events even if JavaScript adds an event listener directly to it.

Example: The none Value

css

<style>
.icon {
  pointer-events: none;
}
</style>
<button><span class="icon">🔍</span> Search</button>

The auto Value

pointer-events: auto restores standard interactive behavior and is the default for most elements, but it becomes especially useful for re-enabling one child inside a parent that has pointer-events: none applied.

Note: Use pointer-events: auto on a specific close button inside an otherwise non-interactive disabled overlay to keep just that one action available.

Warning: pointer-events: auto only re-enables the element it is applied to directly, it does not cascade special behavior beyond normal CSS inheritance.

Example: The auto Value

css

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

Disabling Clicks on an Element

pointer-events: none is a lightweight way to visually disable an interactive-looking element without removing it from the layout or hiding it, unlike the disabled attribute which only applies to form controls.

Note: For custom clickable divs acting as buttons, combine pointer-events: none with reduced opacity and cursor: not-allowed for a fully disabled appearance.

Warning: pointer-events: none does not stop keyboard activation of a focusable element, always also remove it from the tab order with tabindex=-1 when fully disabling.

Example: Disabling Clicks on an Element

css

<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, such as modal backdrops or loading screens, often need to block interaction with everything beneath them while remaining clickable themselves, the opposite use case from the icon pattern.

Note: A modal backdrop typically keeps pointer-events: auto (the default) so clicking it can close the modal, while decorative elements above content use none.

Warning: If a backdrop accidentally has pointer-events: none, clicks will pass through it to the page content behind, breaking the modal's click-to-close behavior.

Example: Overlay Elements

css

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

pointer-events on SVG

pointer-events was originally an SVG-only property with additional values like visiblePainted and all, controlling whether fill, stroke, or bounding box areas respond to pointer interaction.

Note: Use pointer-events: all on an SVG shape with no fill to ensure it still responds to clicks even though it would otherwise be invisible to pointer detection.

Warning: Values like visiblePainted and fill are SVG-specific and have no effect when applied to regular HTML elements outside of SVG.

Example: pointer-events on SVG

css

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="lightblue" stroke="steelblue" stroke-width="2" pointer-events="all"></circle>
</svg>

Common Mistakes

Setting pointer-events: none on an entire disabled form without realizing it also blocks screen reader interaction cues, always pair it with aria-disabled.
Forgetting that a child element can restore pointer-events: auto to become clickable again even if its parent set pointer-events: none.
Using pointer-events: none as the only way to disable a button, which does not prevent the button from being focused and activated by keyboard.

Chapter Summary

pointer-events: none makes an element invisible to mouse and pointer interactions while keeping it visually present.
pointer-events: auto is the default and restores normal interactivity, useful for re-enabling a specific child inside a disabled parent.
pointer-events: all forces an SVG element to always respond to pointer events regardless of its fill or stroke visibility.

Browser Support

pointer-events is supported on all elements in every modern browser; support on non-SVG HTML elements arrived slightly later than SVG support but is now universal.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Media Queries Next Lesson → CSS Outline