Question

我有一个影响div元素的Opacity转换，但它似乎没有改变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

在应用您的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 2

您的子元素上设置了特定的不透明度。因此，它不会继承您对父项所做的任何更改，并且您的转换将不会运行：您已经告诉它具有opacity: 0;，所以即使您设置了父元素的{{}}，它也将具有的内容。 1}}到。

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

您需要更改该特定元素的不透明度才能运行转换。根据您的代码来判断，例如：

opacity

或

document.getElementById(text).firstElementChild.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

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

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

#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

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

CSS Opacity转换不影响子元素

4 个答案: