CSS: Background of top element hiding child element overflow - html

Question

I currently need to do this in CSS:
This is a vertical menu so the yellow "div" count is not fixed, could be 5 like it could be 7.
For now, I have a div with this CSS applied:
#main-menu {
width: 250px;
height: 100%;
padding-top: 50px;
}
That contains the yellow div (nothing special). Then I added a "before" pseudo-element like this:
#main-menu::before {
height:624px;
width:250px;
background-image: url("../img/SSC_fondgris_96_Background.png");
content: " ";
position:absolute;
top:0;
}
The image used is just the curve with a transparent background on the left and the grey on the right. This results in the the image above. The issue is that I'd like to have an hover effect on the yellow div's but I can't get that because the "before" element is on top of them (which is wanted in order to allow the curve to hide the overflow of yellow items) and therefore, the "hover" effect is not applied for the yellow divs.
I guess that it's because the hover is done on the "before" pseudo element and that's exacly my issue. So the question is: is it possible to have an image hidding the overflow of child elements but allowing these children to have a hover effect? Bascailly, a z-index for hover effect:-D
The goal here would also be to avoid using JavaScript to do such things...

Answer 1

Use pointer-events:none on the pseudo-element
From MDN
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.
ul {
list-style: none;
width: 50%;
position: relative;
}
ul::before {
content: '';
position: absolute;
width: 25%;
height: 100%;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5);
pointer-events: none;
}
li {
padding: 25px 0;
background: #000;
margin-bottom: 1em;
}
li:hover {
background: orange;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Answer 2

You should be able to "click through" the pseudo element by negating the pointer events on the element:
#main-menu::before {
height:624px;
width:250px;
background-image: url("../img/SSC_fondgris_96_Background.png");
content: " ";
position:absolute;
top:0;
/* Add the below */
pointer-events: none;
}
... let me know how that works for you.
I need to add that browser support is a little dodge though - only IE11 ... caniuse - pointer-events

Answer 3

You can achieve the effect you want by introducing a third, transparent element which you position over the top of the transparent/grey image.
If your third, transparent element is exactly congruent with the yellow div (two layers below), then you can apply :hover effects to the uppermost, transparent element and it will look like the bottom-most element is responding to the hover.