将CSS不透明度应用于父级，而不是子级[重复]

Posted 2023-02-21

【中文标题】将CSS不透明度应用于父级，而不是子级[重复]

【英文标题】：Apply CSS opacity to parent, but not child [duplicate]

【发布时间】：2020-10-04 10:08:20

【问题描述】：

我有一个带有突出显示的单词的句子：

我正在努力让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 ...

【问题讨论】：

将. 放在css 选择器前时，表示它是一个类。在您的 html 中，您使用了一个 id。要引用一个 id 它的 # + 名称，所以我建议尝试将 .sentence 更改为 #sentence 并且对于特殊但不是淡入淡出相同。

我一直在 id 和 class 之间来回走动，我把它搞砸了......我会编辑这个问题。如果有帮助，我可以同时访问跨度和唯一 ID...

你想要的效果是什么？初始状态是什么，2 秒后会发生什么？

您的编辑导致您的 sn-p 抛出错误。您不再拥有 ID 为 sentence 的元素。

@Mr.Brickowski Initial：只是“特殊”字样。 2 秒后，“句子”的其余部分淡入。

【参考方案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

【讨论】：

嗯......好吧，我会被诅咒的。不透明是绝对的，真是太可惜了……

我可以只设置 alpha 而不是颜色（即，使用全局 CSS 中的基色）吗？ （编辑：可能？...***.com/questions/6962432/…）

@Trees4theForest 我想你可能会问这个问题，答案是也许。见Is it possible to change only the alpha of a rgba background colour on hover?

【参考方案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>

【讨论】：

你改变了游戏规则 ;-)。我无法在单个sentence spans 中获得围绕特殊词的每个块......不幸的是，它是我的父母（句子）和孩子（特殊）。但是为这个想法 +1！