jquery - 应用不透明度而不影响子元素

Question

我有div一个背景图片，当它悬停时，div 将被赋予不透明度 0.7

<div>
  <span>text</span>
</div>

其次，我有一个跨度，当我悬停时，我用show()它来覆盖它的默认 css display:none。

问题是不透明度也适用于span，所以文本并没有像我预期的那样突出。我试图span在悬停事件上设置为不透明度 1，但没有运气。

Answer 1

不透明度将影响元素的所有子元素。您可以通过使用两个并行 div 来实现您想要的，一个用于具有不透明度的背景图像，另一个用于跨度和content. 的absolute定位bg-img不会影响 的位置，content会出现在它的后面。您还想调整bg-img使用top, bottom, right, left,width或height

HTML：

<div>
    <div class="bg-img"></div>
    <div class="content">
        <span>text</span>
    </div>
</div>

CSS：

.bg-img {
    position: absolute;
}
.bg-img:hover {
    opacity: 0.7;
}

Answer 2

如果图像背后的背景颜色已知，您可以将不透明的背景颜色应用到<span>图像以使背景图像看起来褪色。

http://jsfiddle.net/TxQny/

HTML：

<div class="bg">
    <span class="overlay">text</span>
</div>

CSS：

.bg {
    background-color: #e0e0e0; /* You can use an image instead */
}
.overlay {
    display: block;
}
.overlay:hover {
    background-color: rgba(0, 255, 255, 0.3);
}

当然，这是假设你关心的所有浏览器都支持 RGBA。