css opacity affecting sibling image opacity

Question

I have a simple div with two children, a div with an image and yet another div as below:

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

I wanted so that when the second div is hovered, it reduces its opacity to 0.9, so in my CSS my .schedulpicker has this rule:

.schedulepicker:hover {
    opacity: 0.9;
}

The problem is when it is hovered, the sibling image changes in opacity as well. Why is this so?

EDIT

Here's a fiddle http://jsfiddle.net/VUzg9/4/

i am starting to wonder could it actually be the file itself.

EDIT 2

tested with jpg and gif, probably not the image issue.

Answer 1

You need to set the position (default is static) and a z-index for your image.

See jsfiddle

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

The opacity you're setting on #schedulepicker is creating a new stacking context, and stacking contexts affect z-indexes. Since you didn't specify z-indexes manually, they're being auto assigned, and #schedulepicker has a higher value than #settingicon because it comes later in the markup.

EDIT

The W3C color module says the following:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.