在父元素应用CSS不透明度，但不影响子元素

Question

我有一个带有高亮词的句子:

我试图让 class="special" 可见，其余的 class="sentence" 则出现在它周围。

几秒钟后，我会触发这个操作：

setTimeout(() => {
  document.getElementById("sentence-1").className += " fadeIn";
}, 2000)

.sentence {
  opacity: 0;
}
.special {
  opacity: 1;
}

.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

<span id="sentence-1" class="sentence">This is the special <span id="special-1" class="special">word</span>, cool huh?</span>

在我的看法中，这句话的意思是将 .sentence 的透明度设为0，.special 的透明度设为1，然后在触发 JavaScript 时淡入句子...

相反地，整个东西都淡入了，我无法让 .special 一直可见。

编辑：如果有必要，我可以获取父元素和子元素的 .class 或 #id。

- Trees4theForest

---

当在 CSS 选择器前加上 . 时，它表示这是一个类。在您的 HTML 中，您已经使用了一个 id。要引用一个 id，需要使用 # + 名称，因此我建议尝试将 .sentence 更改为 #sentence，对于特殊但不是 fadeIn 的情况也是如此。 - Sean

我一直在ID和类之间反复切换，搞糊涂了...我会编辑问题的。如果有帮助的话，我可以访问span和唯一的ID... - Trees4theForest

你想要达到什么效果？初始状态是什么，2秒后会发生什么？ - Mr. Brickowski

您的编辑导致代码片段出现错误。您不再拥有ID为“sentence”的元素。 - Robby Cornelissen

@Mr.Brickowski 最初：只有“special”这个词会显示出来。2秒后，“sentence”的其余部分才会淡入。 - Trees4theForest

@RobbyCornelissen 很好的发现。已经修复了。 - Trees4theForest

Answer 1

使用 opacity 是不行的，因为不能在透明元素内嵌套不透明元素。结果就是完全透明。

相反地，你可以使用一个 rgba 的颜色值，并过渡 alpha 通道。

例如：

window.addEventListener('load', () =>
  document.querySelector(".sentence").classList.add("fadeIn"));

.sentence {
  color: rgba(0, 0, 0, 0);
  transition: color 2s 2s;
}
.special {
  color: #000;
}

.fadeIn {
  color: rgba(0, 0, 0, 1);
}

<span class="sentence">This is the special <span class="special">word</span>, cool huh?</span>

注意：我必须在window的load事件中运行JS，以确保CSS被正确应用

- Phil

---

哎呀，我会被彻底打败的。不过，关于不透明度是绝对的这一点真是令人沮丧啊... - Trees4theForest

我可以仅设置 alpha 而不是颜色吗（即，使用全局 CSS 中的基础颜色）？（编辑：可能可以？... https://dev59.com/J2w05IYBdhLWcg3w4125） - Trees4theForest

@Trees4theForest 我想你可能会问这个问题，答案是“也许”。请参考是否可以在悬停时仅更改RGBA背景颜色的Alpha值？。 - Phil

Answer 2

setTimeout(() => {
var x = document.getElementsByClassName('sentence');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' fadeIn'; // WITH space added
}
  

}, 2000)

.sentence {
  opacity: 0;
}
  
.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

 <span class="sentence">This is the special </span>word
 <span class="sentence">
, cool huh?</span>

- Daveo

---

你改变了游戏规则 ;-). 我无法将包围特殊单词的每个块放入单独的“句子”跨度中... 对我来说，它们是父级（句子）和子级（特殊）. 但是对于这个想法加一分！ - Trees4theForest