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/