Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within
).
Here’s how I reasoned it out to myself:
- You know how if you
display: hidden;
an element, even if youdisplay: block;
a child, it doesn’t matter — it’s hidden because its parent is hidden. - The same is not true for
visibility: hidden;
. Children will be hidden becausevisibility
inherits, but if youvisibility: visible;
them, they become visible again. - That’s what is happening here with
pointer-events
. If youpointer-events: none;
on a parent and thenpointer-events: auto;
on a child, you’re re-enabling pointer events. Then a:hover
on a parent will be triggered (for example), when hoving the child, but nowhere else inside the parent.
And don’t miss pointer-events: visiblePainted;
?
Direct Link to Article — Permalink
The post Stuff you can do with CSS pointer events appeared first on CSS-Tricks.
Source: CSS-tricks.com