Перемещение непрозрачности 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.

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

При применении ваш яваскрипта код будет добавить стиль непрозрачности на элемент в вашем 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; 
    } 

И это лучше включить значение непрозрачности в doublequotes:

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

https://jsfiddle.net/hpuaor8g/