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的文本

回答

相關問題