CODEWITHSUNDEEP
htmlcss
Michael Agarenzo
Michael Agarenzo

Reputation: 239

Change opacity of span within a on div:hover

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?

Upvotes: 4

Views: 1158

Answers (8)

Shaik
Shaik

Reputation: 378

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

'>' is used to apply css for that particular child class

Upvotes: 2

Ehsan
Ehsan

Reputation: 12969

it's invalid to place a block-level element like h1 inside an inline element like a.

For fix your case, use this code: 

#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>

Upvotes: 2

dshukertjr
dshukertjr

Reputation: 18750

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

Upvotes: 2

vivek manavadariya
vivek manavadariya

Reputation: 230

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

Upvotes: 2

David_Gracias
David_Gracias

Reputation: 63

Your question seems a little confusing. From what I can tell, when you hover #about, you want to hide .hover-text

That can be done in pure CSS like so:

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

This will work for more than just the about div (just make sure you add the .hover-parent class)

Upvotes: 0

AKNair
AKNair

Reputation: 1587

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>

Upvotes: 2

Zaid
Zaid

Reputation: 70

Is this what you're looking for?

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

Codepen link

Upvotes: 1

Nihal
Nihal

Reputation: 5344

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:

Upvotes: 5

Related Questions