设置不透明度孩子从它更大的父

所以这里是我的代码，这显然行不通....基本上，我希望能够看到#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

设置不透明度孩子从它更大的父

回答

相关问题