CSS Pointer Events

The pointer-events property controls whether an element can be the target of mouse clicks.

pointer-events: none

Makes the element “invisible” to clicks — the click passes through to whatever is behind it.

.overlay {
  pointer-events: none;
}

This is useful when you stack images on top of each other (like a unit on a hex tile). Without this, clicking the top image won’t trigger the click event on the element behind it.

pointer-events: auto (default)

The element responds to clicks normally.

.overlay {
  pointer-events: auto;
}

Example: clickable hex with overlay

.hex-container {
  position: relative;
}

.hex-background {
  position: absolute;
}

.unit-overlay {
  position: absolute;
  pointer-events: none;  /* clicks pass through to hex */
}

Now clicking the unit image actually fires the click event on the hex background behind it.