JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="pass_through_svg">
    <rect x="0" y="0" width="200" height="100" fill="rgba(0,0,255,0.4)"/>
</svg>
<div class="pass_through"></div>
<div class="red_block"></div>

CSS

svg#pass_through_svg {
    pointer-events: none;
    position:absolute;
    width:200px;
    height:100px;
}
.pass_through{
    width:300px;
    height:200px; 
    position:absolute; 
    background:blue; 
    top:100px; 
    pointer-events: none;
}
.red_block{
    height:400px;
    width:400px;
    background:red;
    display:block;
}
.red_block:hover{
    background:white;
}
rect:hover {
  fill: black;
}