How to pass mouse events through an absolutely-positioned element with CSS?

Spread the love

Sometimes, we want to pass mouse events through an absolutely-positioned element with CSS.

In this article, we’ll look at how to pass mouse events through an absolutely-positioned element with CSS.

How to pass mouse events through an absolutely-positioned element with CSS?

To pass mouse events through an absolutely-positioned element with CSS, we disable pointer events on the parent element.

For instance, we write

<div class="some-container">
  <ul class="layer-0 parent">
    <li class="click-me child"></li>
    <li class="click-me child"></li>
  </ul>

  <ul class="layer-1 parent">
    <li class="click-me-also child"></li>
    <li class="click-me-also child"></li>
  </ul>
</div>

to add a div with 2 lists.

Then we write

.parent {
  pointer-events: none;
}
.child {
  pointer-events: all;
}

to disable pointer events on the elements with class parent with pointer-events: none;.

And we enable pointer events on the elements with class child with pointer-events: all;.

Conclusion

To pass mouse events through an absolutely-positioned element with CSS, we disable pointer events on the parent element.

Leave a Reply

Your email address will not be published. Required fields are marked *