Interaction
pointer-events
pointer-events sets whether an element receives mouse and touch input. With none, input passes through the element to whatever is behind it.
Syntax
auto | nonePreview
Presets
Drag the bottom-right corner to resize
Code
.box > :nth-child(2) {
pointer-events: none;
}Controls
pointer-eventsnone
About
Values
auto(initial): receives clicks and hovers as usual.none: the element is treated as if it were not there, so the element behind it gets clicked.:hoverand the cursor shape come from the element behind as well.
The preview sets it on the yellow overlay sitting on the lower right of the button. With none, hovering over the overlay still changes the button color, and clicking it adds to the count.
When to use it
Use it on elements layered on top only for looks, such as a gradient over the edge of a list or decorative text over an image, so they don’t get in the way of what’s underneath.
Watch out
- It is inherited. Children of a
noneelement don’t receive input either, but settingpointer-events: autoon a child turns it back on for that child. - It doesn’t stop the keyboard. A button or link with
nonecan still be reached with Tab and pressed with Enter. To really disable something, use thedisabledattribute on form controls, or theinertattribute for a whole section. - There are other keywords such as
visiblePainted,fillandstroke, but they are meant for SVG shapes; their effect on HTML elements is not defined.