CSS - 为什么不是 :hover parent hide child elements

Question

我有一个带有图像的导航栏，如下所示:

<ul>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
</ul>

将鼠标悬停在列表项上时，我想更改背景颜色以覆盖跨度和图像，如下所示:

.me {background-color: none;}
.me:hover {background-color: rgba(150,150,150,0.5);}

问题是，图像没有被覆盖……这是因为背景实际上是……子元素所在的“背景”吗？如果是这样，我怎样才能用纯 CSS 实现这种效果？

编辑 - 解决方案

这适用于我原来的 HTML 结构:

<ul>
  <li>
   <a href="" class="ui-btn">
     <span class="ui-btn-inner"> /* CONTAINS IMAGE AS BACKGROUND */
        <span class="ui-btn-text">text</span>  /* GETS BACKGROUND */
        <span class="ui-icon"></span>
     </span>
   </a>
 </li>
</ul>

“负逻辑”:如果我将背景分配给列表项，它位于所有子元素的后面，所以我想我需要将背景分配给一个元素，该元素是包含 img 的元素的子元素以使其出现以上所有元素。 span ui-btn-inner 包含图像，因此在 span ui-btn-text 上设置 :hover 背景使其出现在图像上方......很奇怪，但有效。

Answer 1

是的，背景只是一个背景，放在任何子元素的后面。

要实现您想要的效果，请尝试使用 css :after 伪元素在悬停时屏蔽图像:

.me {
    position: relative;  
}

.me:hover:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(150,150,150,0.5);
}

它很 Shiny ，您可以将图像用作语义图像，并且不需要额外的 HTML 标记。