CSS 绝对定位悬停

Question

我有透明背景的 block ，但为了防止透明文本，我绝对定位 block 并将其放在内容 block 后面。但是现在我需要在悬停时更改背景(包括 child 在内的所有 block )。是否可以仅使用 css 来实现此目的？我还需要它在 IE 7 上工作..

这是它如何工作的例子。

CSS

.block
{
    position:relative; float:left;
}

span
{
    position:relative; float:left;
    z-index: 5;
    background-color: red;
    margin: 5px    
}

.bg
{
    background-color: blue;
    position:absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0.5;
}

.bg:hover
{
    opacity: 1.0;
}

HTML

<div class="block">
    <span>this</span>
    <span>is</span>
    <span>some</span>
    <span>content</span>

    <div class="bg">
    </div>
</div

http://jsfiddle.net/insanebits/wHBXn/4/

编辑:

问题:悬停在绝对定位的背景上是否可以实现背景颜色变化？

Answer 1

在您的示例中，当您将鼠标悬停在文本上时，悬停将不起作用。将鼠标悬停在 block 上时，您需要更改背景不透明度。这是示例:

.block:hover .bg{
    opacity: 1.0;
}