Question

我有一个strangs CSS问题。

下面是一个非常简单的代码示例，演示了这个问题。

<html>
  <head>
     <style>
      .hover {
        float: right;
      }
      .hover:hover {
        background-color: blue;
      }
      .blocker {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="hover">hover</div>
    <div class="blocker">blocker</div>
  </body>
</html>

我有一个div A，漂浮在另一个div B上，它的不透明度为0.5。我想在浮动div中添加一个CSS悬停规则。但出于某种原因，我不能。

无论我左右浮动，都无所谓。

但是当我将不透明度更改为1时，悬停规则会突然发挥作用。

有人可以解释这种行为吗？

我可以＆＃34;修复＆＃34;通过在一个范围内包含阻止div的内容来解决问题，但感觉就像我不应该这样。

这是一个jsFiddle，展示了问题：http://jsfiddle.net/ed82z/1/

Answer 1

简单地说 - 如果不透明度的值小于1，则它在“上方”。

这里的关键术语是Stacking Context。

通过将不透明度设置为小于1的值，根据规范将其分层不同，因为它接收新的堆叠上下文并位于元素下方。

此处指定float和opacity：

根元素形成根堆叠上下文。其他堆叠上下文由具有除'auto'之外的'z-index'的计算值的任何定位元素（包括相对定位的元素）生成。堆叠上下文不一定与包含块有关。在未来的CSS级别中，其他属性可能会引入堆叠上下文，例如“不透明度”[CSS3COLOR]。

来自不透明度：

由于不透明度小于1的元素是从单个屏幕外图像合成的，因此其外部的内容不能以z顺序在其内部的多个内容之间进行分层。出于同样的原因，实现必须为不透明度小于1的任何元素创建新的堆叠上下文。如果未定位不透明度小于1的元素，则实现必须在其父堆叠上下文中绘制它创建的图层，如果它是具有'z-index：0'和'opacity：1'的定位元素，则使用相同的堆叠顺序。如果定位了不透明度小于1的元素，则[z-index]属性应用[CSS21]中所述，但“auto”被视为“0”，因为始终会创建新的堆叠上下文。有关堆叠上下文的更多信息，请参见[CSS21]的第9.9节和附录E.本段中的规则不适用于SVG元素，因为SVG有自己的渲染模型（[SVG11]，第3章）。

如何修复它：

您可以将pointer-events设置为none，请参阅this fiddle。

Answer 2

添加overflow: hidden为我工作：

.blocker {
    opacity: 0.5;
    overflow:hidden;
}

或者：

.blocker { 
        opacity: 0.5;
        position:relative; 
        z-index:-1;
}

（感谢@Eyal Barta提供此选项）

http://jsfiddle.net/ed82z/7/

这是因为.blocker覆盖了您的其他div，可以使用firebug或其他开发工具轻松显示。

添加不透明度时，添加“堆叠上下文”。

This occurs because these DIVs have special properties which cause them to form a stacking context.

在这种情况下：elements with an opacity value less than 1.这给你的div一个z-index，它导致div以不同的顺序呈现。

The Stacking Context

Answer 3

由于.blocker

，.hover班级与float:right;班级重叠

.blocker {
    opacity: 0.5; 
    width:100px
}

您可以在阻止程序类中修复此集float:left，或者将width:100px设置为div的固定宽度，它不会重叠。

CSS：由于不透明度，悬停不起作用

3 个答案:

如何修复它：