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

首先，您的 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>

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" />

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

CSS Opacity transition not affecting child elements

javascript

css

transition

opacity