У меня есть переход Opacity, влияющий на элемент 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;
-2
Phil Morley 8 Дек 2016 в 17:00

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, выход

Поэтому для решения попробуйте установить непрозрачность только для родительского элемента и добавить переход к нему.

-1
SagiSergeNadir 8 Дек 2016 в 14:06

При применении вашего кода 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" />
1
xenorack 8 Дек 2016 в 14:27

Ваш дочерний элемент имеет определенную непрозрачность. Следовательно, он не наследует никаких изменений, которые вы вносите в родительский элемент, и ваш переход не будет выполняться: вы сказали, что он имеет opacity: 0;, так что это будет то, что он будет иметь, несмотря на то, что вы установили родительский элемент {{ X1}} к.

Это эквивалентно установке цвета дочернего элемента на синий и установке цвета его родительского элемента на красный: этот дочерний элемент по-прежнему будет иметь синий текст, как вы это явно указали.

Вам нужно будет изменить непрозрачность этого конкретного элемента, чтобы выполнить переход. Судя по вашему коду, что-то вроде:

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

Или

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

Сделает трюк для вас.

0
ajm 8 Дек 2016 в 14:14
  1. Во-первых, ваш javascript возвращает идентификатор, который не соответствует вашему html.

  2. Во-вторых, ссылка на идентификатор ("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>
0
DreamTeK 8 Дек 2016 в 14:20