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/ 我开始怀疑是文件本身的问题。

第二次编辑：

测试了jpg和gif格式，可能不是图片造成的问题。

- Crays

---

给你的小提琴怎么样？ - Manwal

在 jsfiddle 上运行良好：http://jsfiddle.net/VUzg9/1/。我使用了 opacity: 0.5 来使效果更加明显。 - Rory McCrossan

它是否在每个浏览器中都出现了？如果没有，你正在使用什么浏览器？ - Henk Jansen

你是否有更多可能导致这种情况的CSS规则？或者JavaScript？ - j08691

更新了jsfiddle，请查看。 - Crays

Answer 1

你需要为你的图片设置position（默认为static）和z-index。请查看jsfiddle。

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

你设置在#schedulepicker上的不透明度创建了一个新的层叠上下文，而层叠上下文会影响z-index。由于您没有手动指定z-index，它们正在自动分配，#schedulepicker的值比#settingicon高，因为它在标记中出现得更晚。 编辑 W3C颜色模块中写道：

如果不透明度小于1的元素未定位，则实现必须在其父堆叠上下文内绘制其创建的图层，使用与定位元素“z-index：0”和“opacity：1”相同的堆叠顺序。

- damian

---

谢谢，现在它运行得很好，但我只是想知道为什么需要z-index，因为它已经在更改不透明度的div上方（从技术上讲）。 - Crays

从技术上讲，它不是在上面或下面 - 它是一个未定义堆叠顺序的同级元素。这似乎是一个错误。 - Adam Jenkins

Answer 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不会给它一个堆叠上下文）。

- Adam Jenkins

Answer 3

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

看两个对比的例子：jsfiddle

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

- renfredxh