Pass mouse events through absolutely-positioned element

html

responsive-design

pointer-events

event-propagation

byAnton Shumikhin·Jan 15, 2025

Enable click-through on an overlay with CSS by setting pointer-events: none;. It lets mouse events pass to elements underneath.

.transparent {
  /* Ghost mode activated 👻 */
  pointer-events: none;
}

Applying the .transparent class to your overlay makes it mouse-interactive. Take a look:

<div>Some actual content or buttons 👀</div>
<div class="transparent" style="position: absolute;">Just a hover effect. Nothing to click here 👌</div>

Now, your overlay zips by like an Olympic sprinter, providing users with a smoothly running UX.

Mechanism in a Nutshell

The functionality pointer-events: none; gifts us is seminal for complex scenarios where we want layered interactive content while maintaining crisp maneuverability. Let's dive down this rabbit hole together:

Setting pointer-events: none; for an element initializes "Now you see me, but can't touch me" mode, ignoring all mouse events, which then pass to the yonder layer. Handy for complex layouts with overlapping UI elements or maintaining non-invasive interactions atop main content.

What if you want certain child elements still clickable within your transparent overlay? Set pointer-events: all; for the rebellious bunch. This could be a lifesaver in a menu or interactive graphics case.

.overlay {
  /* Sorry, mouse, no touchy-touchy 🙅‍♂️ */
  pointer-events: none;
}

.overlay .demanding-child {
  /* Except for me. I crave attention 🙋‍♂️ */
  pointer-events: all;
}

Sometimes you might need to programmatically determine the element below. For those brain-itching times, recall document.elementFromPoint(x, y). It finds true love behind the scenes and handles your events gracefully 🎭.

Older browsers or alien tech posing existential threat to pointer-events? Adapt and survive using an alternative — hide the top div, use document.elementFromPoint to pinpoint the secret lover and restore the status quo.

Remember to check global support — pointer-events enjoys support of almost 98.2%, gracing even the stage of IE11.

Interaction Layers and Event Propagation

Create rich, highly interactive UIs by using transparent divs to create interaction layers and apply pointer-events to control which elements respond to user haymakers.

Mouse events hit the DOM like a meteor strikes the Earth, sinking all the way and then re-emerging. This two-way journey — capture and bubble — can be optimally harnessed.

  Mother DIV
     👇
[🕳️Daughter DIV🕳️]
   ↕️ (Mouse Event)
[🌳🌳🏰🌳]

You can create layers that rise like tides by adjusting the z-index, toggle pointer-events to your needs, and even use JavaScript to dynamically flip the switches.