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

Question

I have a div that has a background image, and when It got hovered, the div will be given opacity 0.7

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

Secondly I've a span that when I got hovered, I use show() to overwrite its default css display:none .

The problem is the opacity applies to the span as well, so the text doesn't stand out as I expect. I tried to set span to opacity 1 on the hover event, no luck with that.

Answer 1

The opacity will affect all children of an element. You can achieve what you want by using two parallel divs, one for the background image with opacity and the other with the span and the rest of the content . The absolute positioning of bg-img will not affect the position of content and will appear behind this. You also want to adjust the positioning and size of bg-img using top , bottom , right , left , width or 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

If the background color behind the image is known, you can apply an opaque background color to the <span> to make the background image look faded.

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

Of course, this assumes that all the browsers you care about supporting support RGBA.