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.
