html - CSS:顶部元素隐藏子元素溢出的背景

Question

我目前需要在 CSS 中执行此操作:

这是一个垂直菜单，所以黄色的“div”数量不固定，可能是 5 也可能是 7。

现在，我有一个应用了这个 CSS 的 div:

#main-menu {
    width: 250px;
    height: 100%;
    padding-top: 50px;
}

包含黄色 div(没什么特别的)。然后我添加了一个像这样的“before”伪元素:

#main-menu::before {
    height:624px;
    width:250px;
    background-image: url("../img/SSC_fondgris_96_Background.png");
    content: " ";
    position:absolute;
    top:0;
}

使用的图像只是左侧透明背景和右侧灰色背景的曲线。这导致了上图。问题是我想对黄色的 div 产生悬停效果，但我无法得到它，因为“之前”元素位于它们之上(这是为了让曲线 overflow hidden 黄色元素)，因此，“悬停”效果不适用于黄色 div。

我猜这是因为悬停是在“之前”伪元素上完成的，这正是我的问题。那么问题来了:是否可以让一张图片隐藏子元素的溢出，但让这些子元素有悬停效果？ Bascailly，用于悬停效果的 z-index:-D

这里的目标也是避免使用 JavaScript 来做这样的事情......

Answer 1

在伪元素上使用pointer-events:none

来自 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>