CSS不透明度转换不影响子元素

Question

我有一个不透明度转换影响div元素，但它似乎并没有改变div内子元素的不透明度。我的理解是，包含div的属性也应该适用于所有的子元素。

任何帮助将不胜感激。下面是HTML和CSS：

.tabtext { 
opacity: 0; 
transition: opacity 1s; 
} 

<div id="smartITtext" class="tabtext"> 
<h2 class="tabtext">Some Text</h2> 
</div> 

下面是在Javascript从而改变不透明度行：

document.getElementById(smartITtext).style.opacity= 1; 

Answer 1

父元素的属性应该应用到子元素。除非子元素具有它自己的属性。

因此，如果我们有这样的代码：

#container { 
    color: blue; 
} 

.one { 
    color: firebrick; 
} 

<div id="container"> 
    <span class="one">hello </span> 
    <span class="two">World</span> 
    <span>. <-- hello should be red, while world and this text should be blue</span> 
</div> 

发挥在jsbin：https://jsbin.com/focimuk/edit?html,css,output

所以解决的办法，尽量父元素上设置不透明度刚，并添加一个过渡吧。

Answer 2

您的子元素具有特定的不透明度设置。因此，它不会继承您对父级所做的任何更改，并且您的转换不会运行：您已经告诉它具有opacity: 0;，所以尽管您设置了父元素的opacity，但它仍将具有该值。

这相当于将子元素的颜色设置为蓝色，并将其父级的颜色设置为红色：该子元素仍将具有蓝色文本，如您已明确告知的那样。

您将需要更改该特定元素的不透明度以运行转换。通过你的代码来看，是这样的：

document.getElementById(text).firstElementChild.style.opacity = 1; 

或

document.querySelector('#' + text + ' .tabText').style.opacity = 1; 

会做的伎俩为您服务。

Answer 3

1. 首先你的javascript会重新生成一个与你的html不匹配的id。

2. 其次id参考码("text")需要加引号。

这是获得所需结果的另一种方法。

document.getElementById("smartITtext").className += " Active";

.tabtext { 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 
.tabtext.Active{ 
 
    opacity:1; 
 
}

<div id="smartITtext" class="tabtext"> 
 
    <h2 class="tabtext">Some Text</h2> 
 
</div>

Answer 4

当应用JavaScript代码它会增加你的HTML元素的透明度样式。所以它不会覆盖CSS风格。

下面是如何让它工作的例子。

document.getElementById("btn").addEventListener("click",function(){ 
 
    var div = document.getElementById("smartITtext"); 
 
    div.style.opacity = 0.5; 
 
});

.tabtext { 
 
transition: opacity 1s; 
 
}

<div id="smartITtext" class="tabtext"> 
 
    <h2 class="tabtext">Some Text</h2> 
 
</div> 
 
<input type="button" id="btn" value="change opacity" />

Answer 5

你应该样式更具体的元素，你的情况，这应该是div.tabtext

div.tabtext { 
     opacity: 0; 
     transition: opacity 1s; 
    } 

而且最好是包括不透明的价值为双引号：

document.getElementById("smartITtext").style.opacity = "1"; 

https://jsfiddle.net/hpuaor8g/