Codestin Search App

Description

The pointer-events property controls whether an element can be the target of pointer interactions (mouse, touch, pen) and how the browser performs hit-testing for that element. It determines whether pointer events reach that element, whether they pass through to elements beneath it in the stacking order, and how the element participates in event targeting and capture. Because it affects hit-testing rather than visual rendering, using it can make an element "transparent" to pointer interactions while leaving its appearance and layout unchanged.

In terms of event flow, when an element is made non-targetable by pointer hit-testing the browser will consider underlying elements during hit-testing and dispatch events to whatever element is found under the pointer. Whether child elements receive pointer events depends on their own pointer hit-testing behavior (the property does not inherit) and on how the element is painted and stacked relative to other elements. This property therefore interacts with the page’s stacking and painting order: elements that are visually underneath may receive events if the top element does not participate in pointer hit-tests. It also affects the start of pointer capture operations in the Pointer Events API, since capture cannot begin on an element that is not a valid pointer target.

Because pointer-events only changes hit-testing, it does not by itself change layout, visibility, or stacking; those are controlled by other properties. For example, an element that is fully transparent due to opacity can still receive pointer events, whereas making something not rendered or out of the document flow with properties like visibility (or display, not linked here) affects whether it receives events. The relative order in which events are passed through to elements beneath is determined by painting and stacking - properties such as z-index and the creation of stacking contexts influence which element becomes the hit-test target when the top element is bypassed.

In practice, this property is useful for UI patterns like click-through overlays, letting you leave a visual overlay in place while allowing pointer interaction with controls underneath, or temporarily disabling pointer interaction on a control while keeping it visible. Be mindful of accessibility: disabling pointer hit-testing does not necessarily make an element unfocusable by keyboard or remove it from the accessibility tree, so pairing this behavior with appropriate focus management (for example adjusting tabindex or ARIA attributes) is important to avoid confusing keyboard and assistive technology users. It’s also commonly used in combination with CSS and DOM event strategies to optimize interactions without resorting to heavier JavaScript hit-test workarounds.

Definition

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.pointerEvents

Interactive Demo

pointer-events: auto;

pointer-events: none;

Pointer Event Demo Link

Syntax

pointer-events: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none

Values

autoThe element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
bounding-boxThe given element can be a target element for pointer events when the pointer is over the bounding box of the element.
visiblePaintedThe element can only be the target of a pointer event when the visibility property is set to visible and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none.
visibleFillThe element can only be the target of a pointer event when the visibility property is set to visible and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.
visibleStrokeThe element can only be the target of a pointer event when the visibility property is set to visible and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.
visibleThe element can be the target of a pointer event when the visibility property is set to visible and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.
paintedThe element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.
fillThe element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.
strokeThe element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.
allThe element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke, and visibility properties do not affect event processing.
noneThe element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value.

Example

HTML

<div class="container">

  <button class="under-button" onclick="alert('Button Clicked!')">

    Click Me!

  </button>



  <div class="overlay">

    I am blocking the button

  </div>

</div>

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.under-button {
  padding: 10px 20px;
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.3); /* Semi-transparent red */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* THIS IS THE KEY PROPERTY */
  pointer-events: none; 
  
  /* Even though this box is on top, clicks will pass 
     straight through to the button underneath. */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS pointer-events property. Hover over a browser icon to see the version that first introduced support for this CSS property.