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

【问题标题】：CSS: hover not working due to opacityCSS：由于不透明度，悬停不起作用
【发布时间】：2014-07-22 15:29:43
【问题描述】：

我遇到了一个奇怪的 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，浮动在另一个不透明度为 0.5 的 div B 上。我想在浮动 div 中添加一个 CSS 悬停规则。但由于某种原因，我不能。

我是向右还是向左浮动，都无所谓。

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

谁能解释这种行为？

我可以通过将拦截器 div 的内容包装在一个跨度中来“解决”问题，但感觉我不应该这样做。

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

【问题讨论】：

下面的答案似乎都没有解释为什么将不透明度设置为 1 而不是 0.5。
这会给你一个线索：jsfiddle.net/abhitalks/ed82z/4
堆叠上下文：(see this) “堆叠上下文由文档中任何位置的任何元素组成，该元素是...不透明度值小于 1 的元素”
这个链接很有趣，但远不足以解释这里发生的事情，IMO。
@dystroy：是的。这就是为什么只是评论而不是尝试回答的原因。

标签： css hover opacity

【解决方案1】：

添加 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

【讨论】：

为什么将不透明度设置为 1 可以解决问题？
很好，我不知道......所以添加 { position:relative; z-index:-1;} 也应该解决这个问题..

【解决方案2】：

在.blocker 中，由于float:right;，类与.hover 类重叠

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

您可以在拦截器类中修复此集float:left，或者将width:100px 设置为固定宽度以使 div 不会重叠。

【讨论】：

【解决方案3】：

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

这里的关键词是Stacking Context。

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

这里指定float和opacity:

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

从不透明度：

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

如何解决：

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

【讨论】：

"它在上面" - 除非您将 z-index 设置为负数？
Hmmm 浮动的内容被堆叠，就好像浮动生成了新的堆叠上下文一样，除了任何定位元素和实际创建新堆叠上下文的元素都参与浮动的父堆叠上下文。浮动可以与正常流中的其他框重叠（例如，当浮动旁边的正常流框具有负边距时）。发生这种情况时，浮动将呈现在未定位的流入块的前面，但在流入的内联后面。
@JanDvorak 是的，你可以使用 z-index 来“解决”这个问题：jsfiddle.net/webtiki/ed82z/6
令我不安的是，您无法通过设置显式 z-indexes 来修复它。
@dystroy 我不认为这句话暗示设置显式 z-indexes 应该修复它，因为 z-index 不适用于非定位元素。