Question

我有一个具有透明背景的块，但为了防止透明文本我绝对定位块并将其放在内容块之后。但现在我需要改变悬停的背景（所有块包括孩子）。是否可以仅使用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:hover .bg{
    opacity: 1.0;
}

Answer 2

您可以删除空div并创建一个蓝色背景和50％不透明度的24位png文件，以放置background-image元素的.block

然后，只需使用.block:hover { ... }

更改背景

Answer 3

    .bg:hover 
{

  opacity:0.4;
filter:alpha(opacity=40);

}

在.bg中使用该选项：hover ..它适用于所有IE浏览器。

CSS绝对定位悬停

3 个答案: