Change span opacity within div: hover

Question

I would like to change the opacity spaninside awhen divall this is inside.

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 it possible to do this with pure CSS?

Answer 1

it only works with a child.

Eg . the class of the class has a child range, 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:

Run code

Answer 2

Yes it is possible. Just use the right 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>

Run code

Answer 3

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

Answer 4

, h1 , a.

:

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

.hover-text {
  opacity: 0;
}

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

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

Answer 5

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

Answer 6

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

' > ' css

Answer 7

, ?

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

Codepen

Answer 8

Your question seems a bit confusing. From what I can say when you point #aboutyou want to hide.hover-text

---

. This can be done in pure CSS like this:

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

This will work not only on the div (just make sure you add the class .hover-parent)