CSS Opacity-Übergang wirkt sich nicht auf untergeordnete Elemente aus

Question

Ich habe einen Opazitätsübergang, der sich auf ein div-Element auswirkt, aber es scheint die Deckkraft der untergeordneten Elemente im div nicht zu ändern. Nach meinem Verständnis sollte die Eigenschaft des containing div auch für alle untergeordneten Elemente gelten.

Jede Hilfe würde sehr geschätzt werden. Im Folgenden finden Sie die HTML und CSS:

.tabtext { 
opacity: 0; 
transition: opacity 1s; 
} 

<div id="smartITtext" class="tabtext"> 
<h2 class="tabtext">Some Text</h2> 
</div> 

unter der Linie in Javascript ist, die die Opazität ändert:

document.getElementById(smartITtext).style.opacity= 1; 

Answer 1

Die Eigenschaft des übergeordneten Elements für das Kind Element angewendet werden soll. NUR, wenn das untergeordnete Element eine eigene Eigenschaft hat.

Also, wenn wir diesen Code haben:

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

Spiel in jsbin: https://jsbin.com/focimuk/edit?html,css,output

Also für eine Lösung, nur versuchen Opazität auf das übergeordnete Element festlegen und einen Übergang hinzufügen.

Answer 2

Ihr untergeordnetes Element hat eine bestimmte Deckkraft. Daher erbt es keine Änderungen, die Sie an dem übergeordneten Element vornehmen, und Ihre Transition wird nicht ausgeführt: Sie haben angegeben, dass sie opacity: 0; haben soll, also wird es trotz allem, was Sie das Element opacity des übergeordneten Elements festgelegt haben, haben.

Das entspricht der Einstellung, dass die Farbe eines untergeordneten Elements blau und die Farbe des übergeordneten Elements rot ist: Dieses untergeordnete Element hat weiterhin blauen Text, wie Sie es ausdrücklich angegeben haben.

Sie müssen die Deckkraft dieses bestimmten Elements ändern, um den Übergang auszuführen. Gemessen an Ihren Code, so etwas wie:

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

oder

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

würde den Trick für Sie tun.

Answer 3

1. Erstens bezieht sich Ihr Javascript auf eine ID, die nicht mit Ihrem HTML übereinstimmt.

2. Zweitens muss die ID-Referenz ("text") in Anführungszeichen stehen.

Hier ist eine alternative Möglichkeit, das gewünschte Ergebnis zu erhalten.

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

Wenn Ihr JavaScript-Code der Anwendung wird es die Opazität Stil auf das Element in Ihrem HTML hinzuzufügen. Es überschreibt also nicht den CSS-Stil.

Hier ist ein Beispiel, wie Sie es arbeiten lassen können.

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

Sie sollten spezifischere Element Stil, für Ihren Fall dieses div.tabtext

div.tabtext { 
     opacity: 0; 
     transition: opacity 1s; 
    } 

werden sollte, und es ist besser, Wert der Opazität in doublequotes enthalten:

document.getElementById("smartITtext").style.opacity = "1"; 

https://jsfiddle.net/hpuaor8g/