6

我有一个简单div的两个孩子，一个div带有图像，另一个div如下：

<div style="width: 500px;">
    <div class="settingicon righty">
        <img src="/images/icons/setting.png" />
    </div>
    <div class="schedulepicker quat todaytoday">MONDAY</div>
</div>

我希望当第二个div悬停时，它将其不透明度降低到0.9，所以在我的 CSS 中，我.schedulpicker有这个规则：

.schedulepicker:hover {
    opacity: 0.9;
}

问题是当它悬停时，同级图像的不透明度也会发生变化。为什么会这样？

编辑

这是一个小提琴 http://jsfiddle.net/VUzg9/4/

我开始怀疑它是否真的是文件本身。

编辑 2

用jpg和gif测试过，可能不是图片问题。

4

3 回答 3

8

您需要为您的图像设置position（默认为static）和 a z-index。

见jsfiddle

.righty {
    float: right;
    position: relative;
    z-index: 100;
}

您设置的不透明度正在#schedulepicker创建一个新的堆叠上下文，并且堆叠上下文会影响 z-index。由于您没有手动指定 z-indexes，因此它们是自动分配的，并且#schedulepicker具有比#settingicon标记中稍后出现的值更高的值。

编辑

W3C 颜色模块说明如下：

如果不透明度小于 1 的元素未定位，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有 'z-index: 0' 和'不透明度：1'。

于 2013-10-28T15:15:06.540 回答
2

好问题 - 它看起来像一个错误。

您需要在其上放置一个位置和一个 z-index 才能使其工作。

.righty {
    float: right;
    position: relative; 
    z-index: 1;
}

http://jsfiddle.net/VUzg9/9/

编辑 我想添加到这个答案，因为这是一个非常有趣的问题。

如果我们查看规范，它会告诉我们：

In future levels of CSS, other properties may introduce stacking contexts, 
for example 'opacity' [CSS3COLOR].

正如@enfredH04 在他的回答中指出的那样，一旦元素改变了不透明度，它似乎就会获得一个堆叠上下文（也许 Blink 实现了规范的一部分[上面引用的]实际上尚未编写或至少发布，但是？）它的兄弟没有它自己的堆叠上下文，因此，它出现在改变不透明度的元素后面。

如果您给元素的起始不透明度为 0.9，您可以看到这一点 - http://jsfiddle.net/VUzg9/11/ - 此时它必须获得堆叠上下文。（有趣的是，1 的起始不透明度不会给它一个堆叠上下文）。

于 2013-10-28T15:19:25.523 回答
1

它并没有改变“兄弟”的不透明度，它实际上是在悬停时覆盖它。

查看两个对比示例：jsfiddle

设置position: relative和az-index似乎可以解决问题

于 2013-10-28T15:25:00.080 回答