What is pointer-events in CSS: Simple Explanation and Usage

The pointer-events CSS property controls whether an element can receive mouse or touch events like clicks or hovers. Setting pointer-events: none; makes the element ignore all pointer interactions, letting events pass through to elements behind it.

How It Works

Imagine you have a glass window with a sticker on it. Normally, if you try to touch the sticker, you are actually touching the glass behind it. The pointer-events property works like deciding if the sticker should block your touch or let it pass through to the glass.

When you set pointer-events: none; on an element, it becomes like an invisible sticker that does not block your finger. The clicks or touches go right through it to whatever is behind. If you set it to auto (the default), the element reacts normally to pointer actions.

This property is useful when you want to control which parts of your page respond to mouse or touch events without changing the layout or visibility.

Example

This example shows a red square on top of a blue square. The red square ignores clicks because of pointer-events: none;, so clicking on it triggers the blue square's click event.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  position: relative;
}

#blue {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

#red {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  user-select: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Output

<div id="blue">Blue Box</div><div id="red">Red Box</div>

When to Use

Use pointer-events when you want an element to be visible but not interfere with mouse or touch actions. For example:

• Making decorative elements or overlays that should not block clicks.
• Allowing clicks to pass through transparent parts of an image or SVG.
• Temporarily disabling interaction on buttons or links without hiding them.
• Creating custom UI controls where only certain parts respond to pointer events.

This helps improve user experience by controlling exactly what parts of your page respond to user actions.

Key Points

• pointer-events: none; disables mouse and touch events on the element.
• Events pass through the element to whatever is behind it.
• Default value is auto, meaning normal pointer behavior.
• Works on all visible elements including SVG and HTML.
• Useful for controlling interaction without changing visibility or layout.

Key Takeaways

The pointer-events property controls if an element reacts to mouse or touch events.

Setting pointer-events to none lets clicks pass through the element to elements behind it.

Use it to make elements visible but non-interactive, like overlays or decorations.

Default pointer-events value is auto, which means normal interaction.

It works on HTML and SVG elements to control user interaction precisely.