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

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)和a z-index.

见jsfiddle

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

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

编辑

在W3C彩模组说以下内容:

如果未定位不透明度小于1的元素,则实现必须在其父堆叠上下文中以与"z-index:0"的定位元素相同的堆叠顺序绘制它创建的图层. '不透明度:1'.