CSS不透明度の遷移が子要素に影響しない

Question

div要素に影響する不透明度遷移がありますが、div内の子要素の不透明度は変更されていないようです。私の理解は、包含divのプロパティはすべての子要素にも適用されるべきであるということです。

ご協力いただければ幸いです。以下は

.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

は親要素のプロパティが子要素に適用するには、以下のHTMLとCSSです。子要素がそれ自身のプロパティを持っていないかぎり。だから、

我々はこのコードを持っている場合：jsbinで

#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> 

が遊び：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. 第2に、id参照("text")は引用符で囲む必要があります。

これは、望ましい結果を得るための別の方法です。あなたのjavascriptのコードを適用する場合

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

それはあなたの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/