CSS hover if element is covered by another?

I have an element below a div containing some images with transparent background. When I hover a svg rect, I want to change its fill. At the moment it doesn’t work because it’s covered by the div. (It has to be so).

#cube:hover {
    fill: rgb(255,255,255);
}

<div id="main">
    <svg width="100%" height="100%" viewBox="0 0 100 100">
        <rect id="cube" x="0" y="0" width="50" height="5" fill="rgb(0,0,255)"></rect>
    </svg>
    <div>
        <img src="randompic.png">
    </div>
</div>

>Solution :

you can try adding a CSS property pointer-events: none; to the div.

#main > div {
    pointer-events: none;
}
#cube:hover {
    fill: rgb(255,255,255);
}