設置不透明度孩子從它更大的父

所以這裏是我的代碼，這顯然行不通....基本上，我希望能夠看到#child而父母是隱藏設置不透明度孩子從它更大的父

<style> 
#parent { opacity : 0 } 
#parent:hover { opacity : 1 } 
#child { opacity:1 } 
</style> 

    <div id="parent"> 
     <h1 id="child"> title </h1> 
     <span>aaaa</span> 
     <span>aaaa</span> 
     <span>aaaa</span> 
    </div>

它的一部分非常大的代碼與很多的jQuery的效果和代碼，其他人已經寫了，我不想搞亂任何東西，所以我真的不想在#parent之外移動#child

來源

2015-01-09 max

我敢肯定的混濁繁殖如堆棧。子繼承父級的不透明堆棧。 – MightyPork 2015-01-09 20:29:08

你的意思是[這個]（http://jsfiddle.net/chipChocolate/qase4n5z/）？ – 2015-01-09 20:31:30

@ chipChocolate.py關閉...我想讓孩子看起來像這樣http://jsfiddle.net/qase4n5z/1/但在此代碼中懸停不起作用 – max 2015-01-09 21:31:40

元素的不透明度來自其親本：

MDN：元素及其包含的子元素相對於元素的背景具有相同的不透明度，即使元素及其子元素相對於彼此具有不同的不透明度。

一個辦法來解決這個問題是使用RGBA顏色，而不是不透明度：

#parent { 
 
    color:rgba(0, 0, 0, 0); 
 
} 
 
#parent:hover { 
 
    color:rgba(0, 0, 0, 1); 
 
} 
 
#child { 
 
    color:rgba(0, 0, 0, 1); 
 
}

<div id="parent"> 
 
<h1 id="child"> title </h1> 
 
<span>aaaa</span> 
 
<span>aaaa</span> 
 
<span>aaaa</span> 
 
</div>

來源

2015-01-09 20:31:31 j08691

謝謝你會測試它，但我認爲顏色用於更改字體/文本顏色 – max 2015-01-09 21:24:49

您的示例中包含文本。 – j08691 2015-01-09 21:25:30

我看，所以它不會隱藏背景和其他東西？就像父母有紅色背景一樣 – max 2015-01-09 21:32:55

設置不透明度孩子從它更大的父

回答

相關問題