Change opacity of span within a on div:hover

Question

I would like to change the opacity of a span within an a when the div all of this is within is hovered.

HTML:

<div id="about">
  <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>

CSS:

.hover-text {
  opacity: 0;
}

#about:hover {
  change .hover-text opacity to 1
}

Is this possible to do with pure CSS?

Answer 1

it only works on child element.

For example .about class has child span then it will work

.about:hover .hover-text {
  opacity: 0;
}

.about{
  border:1px solid black;
}
.hover-text{
  opacity: 0;
  font-size:30px;
}
.about:hover .hover-text {
  opacity: 1;
}

<div class="about">
  <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>
CSS:

Answer 2

Yes, Its possible. Just use the correct selector

.hover-text {
  opacity: 0;
}
#about:hover .hover-text {
  opacity: 1;
}

<div id="about">
  <a style="text-decoration: none;" href="#"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>