Question

我有一个简单的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测试，可能不是图像问题。

Answer 1

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

请参阅jsfiddle

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

您在#schedulepicker上设置的不透明度正在创建新的堆叠上下文，而堆叠上下文会影响z索引。由于您没有手动指定z索引，因此它们会自动分配，#schedulepicker的值高于#settingicon，因为它会在标记的后面出现。

修改

W3C color module说明如下：

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

Answer 2

很棒的问题 - 它看起来像个错误。

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

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

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

修改我想补充一下这个答案，因为这是一个非常有趣的问题。

如果我们查看the spec，它会告诉我们：

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的起始不透明度并没有给出堆叠上下文）。

Answer 3

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

参见两个截然不同的例子：jsfiddle

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

css不透明度影响兄弟图像不透明度

3 个答案: