pointer-events

The pointer-events property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based events. In other words, it lets you decide whether the browser should treat an element as interactive when the pointer is over it. .no-pointer-events { pointer-events: none; } CodePen Embed Fallback To understand how the property works, it helps to know what the browser does before it fires a pointer event. First, it has to determine which element is under the pointer. This process is known as hit-testing. Normally, the browser chooses the topmost element under the pointer. But if that element has pointer-events set to none , the browser skips it and continues looking for the next eligible element underneath. Once you think about pointer-events this way, most of its behavior starts to make sense. Rather than disabling events, it simply changes which element (or, in the case of SVG, which part of an element) becomes the event target in the first place. Syntax pointer-events: auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none; Initial: auto Applies to: All elements. In SVG, it applies to container elements, graphics elements, and the element. Inherited: Yes Computed value: Specified keyword Animation type: discrete Values pointer-events: auto; pointer-events: none; /* SVG values */ pointer-events: visiblePainted; pointer-events: visibleFill; pointer-events: visibleStroke; pointer-events: visible; pointer-events: painted; pointer-events: fill; pointer-events: stroke; pointer-events: bounding-box; pointer-events: all; /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: revert; pointer-events: revert-layer; pointer-events: unset; Besides the standard CSS global values shown above, pointer-events defines eleven keyword values. You’ll use auto and none with both HTML and SVG elements, while the other nine are SVG-only and provide f