CSS:由于不透明度,悬停不起作用

Question

CSS:由于不透明度,悬停不起作用

我有一个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>

Run Code Online (Sandbox Code Playgroud)

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

无论我左右浮动,都无关紧要.

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

任何人都可以解释这种行为吗？

我可以通过在一个范围内包含阻止div的内容来"修复"这个问题,但感觉就像我不应该这样.

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

Answer 1

Ben*_*aum 19

简单地说 - 如果不透明度小于1,则它在"上方".

这里的关键术语是堆叠上下文.

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

它在这里指定float和不透明度:

根元素形成根堆叠上下文.其他堆叠上下文由具有除'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,看到这个小提琴.

归档时间：	11 年，6 月前
查看次数：	3641 次
最近记录：	11 年，6 月前