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上设置：悬停背景使它显示在图像上方...很奇怪，但是有效。

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

另一个潜在的选项应该是跨浏览器而不是：之后可能是：

.me:hover span { display: hidden; }

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

编辑 - 解决方案

3 个答案: