0

我有具有透明背景的块，但为了防止透明文本，我绝对定位块并将其放在内容块后面。但现在我需要在悬停时更改背景（包括儿童在内的所有块）。是否可以仅使用 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/

编辑：

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

4

3 回答 3

1

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

.block:hover .bg{
    opacity: 1.0;
}
于 2013-07-04T10:10:54.020 回答
0 
    .bg:hover 
{

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

}

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

于 2013-07-04T10:28:18.290 回答
0

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

然后，只需更改背景.block:hover { ... }

于 2013-07-04T09:51:58.243 回答