SVG pointer-events none
Example
the most common use case is to set pointer-events to none to prevent certain shapes or all of your drawing to capture mouse events, and to let the shapes underneath them to receive the events.
If you hover over the area where the red circle overlaps the blue circle, the blue circle will still receive the mouse events, as pointer-events is set to none
<svg viewBox="0 0 150 100">
<style>
.target:hover{fill:green}
</style>
<circle class="target" cx="50" cy="50" r="50" fill="blue"/>
<circle cx="100" cy="50" r="50" fill="red" pointer-events="none"/>
</svg>
