CSS pointer-events

The CSS pointer-events property is used to control how an element responds to mouse and touch events. It allows you to control whether an element can be the target of pointer events or if it should be “transparent” to pointer interactions, allowing clicks and other interactions to “pass through” the element to underlying elements.

The pointer-events property can take the following values:

1. auto (default): The element behaves as usual, and its pointer events are triggered according to its normal behavior and the pointer-events of its descendants.
2. none: The element and its descendants do not respond to pointer events. Clicks and other interactions will pass through the element to the elements below it.
3. visiblePainted: The element is a target for pointer events only if its visible content is painted. It ignores clicks on transparent areas.
4. visibleFill: The element is a target for pointer events only if its fill or background content is painted. It ignores clicks on transparent areas.
5. visibleStroke: The element is a target for pointer events only if its stroke (border) is painted. It ignores clicks on transparent areas.
6. painted: The element is a target for pointer events only if its content is painted. It ignores clicks on transparent areas.
7. fill: The element is a target for pointer events only if its fill or background content is painted. It ignores clicks on transparent areas.
8. stroke: The element is a target for pointer events only if its stroke (border) is painted. It ignores clicks on transparent areas.

Example:

.transparent-box {
  pointer-events: none;
  opacity: 0.5;
}

In this example, the elements with the class .transparent-box will not respond to pointer events (none value). Clicks and other interactions will pass through these elements to the elements below them. Additionally, the opacity property is set to 0.5, making the element semi-transparent.

The pointer-events property is especially useful when you want to create interactive elements that overlay other elements without blocking interactions with the underlying content. It is commonly used in creating custom tooltips, overlays, or interactive elements that do not interfere with the functionality of other elements on the page.

Keep in mind that the pointer-events property may not be fully supported in older browsers, so always test for cross-browser compatibility when using it in production.