how to ignore parent css opacity which is dynamic and forcefully applying on child span

Asked Jul 20 '22 at 10:54

Active Jul 20 '22 at 10:54

Viewed 13 times

Below I have a text which is a nested span. I just want to apply opacity to the first word Hello only. but, the opacity is changing to nested span also i.e STOP.

How to ignore the dynamic css changes of parent element?

let txt = document.getElementById("txt")

setInterval(() => {
    txt.style.opacity = txt.style.opacity == 1 ? 0.2 : 1
},500)

<span id="txt" style="font-size: 50px;">
  Hello
  <span style="opacity : 1">STOP</span>
</span>

asked Jul 20 '22 at 10:54

Vikas Acharya

3,550
4
19
52

you cannot ignore (in any way) an opacity applied to the parent. You need to do what you want differently – Temani Afif Jul 20 '22 at 11:05
You need to put `Hello` in a separate span and change the opacity of that new span. – Reyno Jul 20 '22 at 11:06

how to ignore parent css opacity which is dynamic and forcefully applying on child span

0 Answers0