CSS pointer-events Property

What You’ll Learn

The pointer-events property controls whether an element can receive mouse clicks, touch taps, and hover events. It is especially useful for overlays, disabled-looking UI, and SVG hit areas.

Introduction

The pointer-events property in CSS is used to control whether an element can be the target of pointer events, such as mouse clicks, touch events, or cursor hovers.

This property is particularly useful for creating interactive web elements and managing user interactions on your webpage.

Definition and Usage

On everyday HTML pages, you will mostly use auto and none. Set pointer-events: none when an element should look present but not capture clicks, such as a decorative label over an image link.

SVG graphics support additional values that control which painted parts of a shape can receive pointer input. That helps you keep decorative strokes visible while limiting clicks to the useful area.

📝 Syntax

The syntax for the pointer-events property is simple and can be applied to any HTML element.

element {
  pointer-events: value;
}

Here, value can be one of the predefined keywords that determine the behavior of pointer events for the element.

Basic Example

button {
  pointer-events: none;
}

Syntax Rules

• auto restores normal pointer interaction.
• none makes the element transparent to pointer hit testing.
• Events can reach elements below when the top layer uses none.
• Pair visual disabled styles with the right HTML attribute when needed.
• SVG supports extra values for fill, stroke, and visibility rules.
• Test touch devices when building overlays and modals.

🎯 Default Value

The default value of the pointer-events property is auto, which means that the element can be the target of pointer events as usual.

💎 Property Values

For HTML, focus on auto and none. SVG content can use the additional paint and visibility keywords below.

When Does pointer-events Matter?

pointer-events is the right tool when pointer input should be redirected or blocked:

• Decorative overlays — Let clicks pass through labels sitting on top of links or cards.
• Loading shields — Block interaction with a panel while data loads.
• Disabled-looking UI — Stop clicks on controls that are not yet available.
• SVG graphics — Limit hit areas to fills or ignore wide decorative strokes.

For true form disabling and accessibility, combine CSS with the correct HTML attributes and ARIA patterns.

Examples Gallery

Start with the reference disabled button, build a click-through overlay, toggle a blocking shield, and refine SVG hit areas.

<style>
  button {
    pointer-events: none;
    background-color: grey;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>

<h1>Button with Disabled Pointer Events</h1>
<button>Click Me</button>
<p>The button above cannot be clicked because pointer events are disabled.</p>

<style>
  .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
</style>

<style>
  .shield.blocking {
    pointer-events: auto;
  }

  .shield.pass-through {
    pointer-events: none;
  }
</style>

<style>
  .decoration {
    pointer-events: none;
  }
</style>

<svg viewBox="0 0 400 200">
  <rect class="hit" x="40" y="40" width="320" height="120"/>
  <path class="decoration" d="M 20 180 Q 200 20 380 180"/>
</svg>

pointer-events vs cursor and opacity

pointer-events: none stops hit testing, but the element can still look clickable if cursor: pointer remains. Update cursor styles together with pointer rules.

opacity can make content look faded, and pairing it with pointer-events: none is a common disabled-state pattern. Remember that visibility: hidden also affects interaction differently.

.is-unavailable {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

💡 Best Practices