CSS不透明 - 不能覆盖下面的div的文本

我有一个文本和“悬停”的div，我想显示另一个div与其他文本。CSS不透明 - 不能覆盖下面的div的文本

问题是，从第一个div的文本通过到第二个，一切似乎混合起来。我想第二个div完全覆盖第一个。

HTML

<div class="outer_box"> 
     <div class="inner_box"> 
      Main</div> 
      <span class="caption">Caption</span> 
</div>

CSS

.outer_box { 
    width:100px; 
    height:100px; 
    background-color:orange; 

} 

.inner_box{ 
    width:100px; 
    height:100px; 
    position:absolute; 

} 

.caption { 
    width:100px; 
    height:100px; 

    background:black; 
    color:rgba(255,255,255,1); 
    opacity:0; 
} 

.outer_box:hover .caption{ 
    opacity:1; 
}

谢谢！

来源

2013-02-07 DimC

好吧，我当它发生时就讨厌它，当我发布这个问题时，我就想出了它。我可以添加：.outer_box：hover .inner_box {opacity：0;}但是，为什么不在顶部覆盖下面的一个？ – DimC

关于堆栈溢出，我们鼓励您针对自己的问题提交一个答案，并接受那些如果找出答案的答案。 –

.inner_box:hover { 
    opacity: 0.0; 
}

来源

2013-02-07 08:17:20 KBN

0.0有点太精确了你不觉得？ ;-) – 2013-02-07 08:21:15

@MicahDelaneBolen是的，但不透明度值介于0.0和1.0之间，0.0使事情更清晰我相信。 :) – KBN

是的，想通了，但我会接受你的答案第一！不过，我觉得文字不完全不透明有点奇怪。 – DimC

添加到您的CSS：

.outer_box:hover, .inner_box:hover { 
    opacity:0; 
}

如果你会发现，我就确定包括.outer_box：悬停选择的情况下，你打算永远是使外包装盒较显著大内箱。

关于透明度属性的行为更多有用的信息可以在这里找到：http://www.w3schools.com/cssref/css3_pr_opacity.asp

来源

2013-02-07 08:19:46

你需要，使其消失悬停样式从第一格文：

.inner_box:hover .text { 
    visibility:hidden; 
}

来源

2013-02-07 08:19:51 br3w5

CSS不透明 - 不能覆盖下面的div的文本

回答

相关问题