CSS pointer-events property – Controlling Pointer Interactions

Definition and Usage

pointer-events property in CSS controls how an element responds to pointer events such as clicks, hovers, and drags. It determines whether the element can be a target of pointer interactions.

Understanding Pointer Events

Pointer events refer to user interactions that occur through input devices such as a mouse, touch screen, or stylus.
These interactions—known as "events"—are triggered when users engage with a web page or application and include actions like clicking, hovering, and dragging.

Pointer events play a critical role in controlling user interface behavior and enhancing the overall user experience.

For example, when a user clicks an element with a mouse, a pointer event is fired in response to that click. On mobile devices, touching an element also triggers a corresponding pointer event. Similarly, hovering the mouse over an element or dragging it causes pointer events to be generated.

The pointer-events property specifies whether an element can be the target of these pointer events.

Formal syntax

Formal definition

Formal syntax of the pointer-events property
Initial value	`auto`
Applies to	all elements
Inherited	yes
Animatable	no

Values

Accepted values for the pointer-events property
`auto`	This is the initial value. The element behaves normally and responds to pointer events according to its inherent behavior. For example, clickable elements will respond to click events, and text content will remain selectable.
`none`	The element does not respond to pointer events and cannot be the target of such interactions. However, if the element contains child elements with a different pointer-events value, those children may still receive pointer events. In this case, `pointer-events` can pass through the parent element and trigger event listeners on child elements during the event's capture or bubble phase.

Syntax

CSS

/* Keyword values */
pointer-events: none;
pointer-events: auto;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
pointer-events: revert;
pointer-events: revert-layer;

Example

Let’s explore how the pointer-events property works through a simple example.

In the following code, we apply pointer-events: none; to an <a> element. This disables pointer interactions for the element, so clicking the link will have no effect.

With pointer-events: none; applied, the <a> element becomes unclickable. The browser will ignore all pointer events on it, including click actions.

Usage Considerations

When using the pointer-events property, there are two important things you should always keep in mind.

Accessibility Considerations

When using the pointer-events property, it's important to consider its impact on accessibility.

Setting pointer-events: none on an element prevents it from receiving any pointer input, such as mouse clicks or touch interactions. As a result, users who rely on assistive technologies or alternative input methods—such as those with visual impairments or motor disabilities—may be unable to interact with the element.

To ensure your interface remains accessible to all users, always follow accessibility best practices when disabling pointer events.

The `cursor` Property Has No Effect When `pointer-events` none Is Applied

The cursor property specifies the type of mouse cursor to display when hovering over an element.

However, if an element has pointer-events: none, it becomes non-interactive and cannot be the target of pointer events.
As a result, the cursor property on that element has no effect.

Instead, the browser determines the cursor based on the nearest underlying element in the visual stacking order, not the DOM hierarchy.

Note:
“Underlying element” refers to an element visually beneath the current one—not necessarily a parent in the DOM.

Example Scenario

HTML

<div class="parent" style="cursor: not-allowed;">
    <div class="child" style="pointer-events: none; cursor: pointer;">
        This area is not clickable
    </div>
</div>

.child – Because pointer-events: none is applied, the element ignores mouse events. Even though cursor: pointer is specified, it does not take effect.
.parent – This element lies visually beneath .child and receives the pointer event instead. Since its cursor property is set to not-allowed, that cursor is shown instead.

Browser compatibility

Browser Compatibility for the pointer-events Attribute
Attribute	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`pointer-events`	2.0	12.0	3.6	4.0

Specifications

Specification for the pointer-events Attribute
Specification
`pointer-events`	CSS Basic User Interface Module Level 4 #pointer-events-control