CSS - 为什么不：悬停父隐藏子元素

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

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

Answer 2

是的，因为背景实际上就是背景。在原始 css 中实现这一点的最佳方法是继续使用背景：

.me
{
    background-color: none;
    background-image: url(dummy.png);
    background-repeat: no-repeat;
}
.me:hover
{
    background-color: rgba(150,150,150,0.5);
    background-image: ;
}

你也可以用一点 javascript 来实现这个效果。

<ul>
  <li class="me">
    <span class="cont"><img="dummy.png" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";'></span>
  </li>
  <li class="me">
    <span class="cont"><img="dummy.png"" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";></span>
  </li>
</ul>

代码未经测试。它可能需要调整才能使其恰到好处。

编辑：分层概念
这些伪代码都不是测试的，但我以前做过，所以可能只需要稍微调整一下。我手头没有原件的副本，所以我必须把它转过来。第一步是创建一个相对容器和2个子容器。

.meContainer
{
    position: relative;
    width: 100px;
    height: 30px;   /* I usually specify height/width for these things */
}

.meContainerLink
{
    position: absolute;
    top: 0;
    left: 0;        /* You need to use position to get them to overlap */
    z-index: 1;     /* Provide a layer */
}

.meContainerAlpha
{
    position: absolute;
    top: -30px;     /* Move it UP 30px */
    left: 0px;
    z-index: 2;     /* Place it on top of the other layer */
    display: none;  /* Hide it */
    background-color: rgba(150,150,150,0.5);   
}

.meContainerAlpha:hover
{
    display: inline; /* Show it */
}

然后您需要将这些放在您的<li> 中的 div 中。

<ul>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
</ul>

我不记得曾经在嵌入的<li> 标签中尝试过这种方法，所以一开始它的行为可能很奇怪。您可能不得不放弃<li> 并完全切换到不同的<div> 结构。

Answer 3

另一个应该比 :after 更跨浏览器的潜在选项可能是：

.me:hover span { display: hidden; }