ssougnez ssougnez - 4 months ago 11
HTML Question

CSS: Background of top element hiding child element overflow

I currently need to do this in CSS:

enter image description here

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

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>

Comments