CSS：顶级元素隐藏子元素溢出的背景

Question

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

这是一个垂直菜单，因此黄色“div”计数不固定，可能是5，就像它可能是7。

现在，我有一个应用此CSS的div：

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

包含黄色div（没什么特别的）。然后我添加了一个像这样的“之前”伪元素：

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

使用的图像只是左边是透明背景，右边是灰色的曲线。这导致上面的图像。问题是我想在黄色div上有悬停效果，但是我无法得到它，因为“before”元素位于它们之上（为了让曲线隐藏溢出而需要黄色项目因此，“悬停”效果不适用于黄色div。

我想这是因为悬停是在“before”伪元素上完成的，这是我的问题。所以问题是：是否有可能有一个图像隐藏子元素溢出但允许这些孩子有悬停效果？ Bascailly，悬停效应的z指数：-D

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

Answer 1

在伪元素

上使用pointer-events:none

来自MDN

  

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）可以成为鼠标事件的目标。如果未指定此属性，则visiblePainted值的相同特征将应用于SVG内容。

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

你应该能够通过否定元素上的指针事件来“点击”伪元素：

#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;
}

...让我知道这对你有什么用。

我需要补充一点，浏览器支持有点躲闪 - 只有IE11 ...... caniuse - pointer-events

Answer 3

您可以通过引入第三个透明元素来实现您想要的效果，该元素位于透明/灰色图像的顶部。

如果你的第三个透明元素与黄色div（下面两层）完全一致，那么你可以将:hover效果应用到最上面的透明元素，它将看起来像最底部的元素是响应悬停。