In SVG there are two objects, one of which (upper) partially overlaps another object (lower). On the bottom of the object is hover.

How to make so that the hover would work not only on the open area of ​​the lower object but also on the part that closes the top?

    1 answer 1

    The classic HTML method is to use pointer-events:none; relevant for svg:

     .red { fill: red; cursor: pointer; } .blue { fill: blue; pointer-events: none; } .red:hover { fill: orange } 
     <svg viewBox="0 0 220 220" height="100"> <rect x="10" y="10" width="150" height="100" class="red"/> <rect x="50" y="50" width="150" height="100" class="blue"/> </svg>