CSS不透明度过渡不影响子元素答案

【问题标题】：CSS Opacity transition not affecting child elementsCSS不透明度过渡不影响子元素
【发布时间】：2017-04-23 19:17:38
【问题描述】：

我有一个影响 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;

【问题讨论】：

你的js中设置的text变量在哪里，你能显示它的值是什么。

标签： javascript css transition opacity

【解决方案1】：

当应用您的 javascript 代码时，它会在您的 html 中的元素上添加 opacity 样式。所以它不会覆盖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" />

【讨论】：

【解决方案2】：

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

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

您需要更改特定元素的不透明度才能运行过渡。从您的代码来看，类似于：

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

或

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

会为您解决问题。

【讨论】：

【解决方案3】：

首先，您的 javascript 引用了一个与您的 html 不匹配的 id。
其次，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>

【讨论】：

【解决方案4】：

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

所以如果我们有这个代码：

#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

因此，对于解决方案，请尝试仅在父元素上设置不透明度，并向其添加过渡。

【讨论】：