我有一个带有图像的导航栏,如下所示:
<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 背景使其出现在图像上方......很奇怪,但有效。
最佳答案
是的,背景只是一个背景,放在任何子元素的后面。
要实现您想要的效果,请尝试使用 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 标记。
关于CSS - 为什么不是 :hover parent hide child elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7106585/