CODEWITHSUNDEEP
htmlcss
Talha Munir
Talha Munir

Reputation: 526

changing child element property on hover

I want the color of 'h1' tag to change when the mouse hovers over the 'li' tag. I tried following the answer provided here: CSS :: child set to change color on parent hover, but changes also when hovered itself but that hasn't worked for me.

li{
  width: 100vw;
  }
li:hover{
  background-color: orange;
  }
li:hover h1:not(:hover){
  color: white;
  }
<ul>
  <li><h1>Home</h1></li>
</ul>

Upvotes: 1

Views: 147

Answers (3)

Pooja
Pooja

Reputation: 11

This worked for me.

li{
  width: 100vw;
  }
li:hover{
  background-color: orange;
  }
li h1:hover {
  color: white;
  }
<ul>
  <li><h1>Home</h1></li>
</ul>

Upvotes: 1

Tom O.
Tom O.

Reputation: 5941

You just need to set the color property in your CSS:

li {
  width: 100vw;
}

li:hover {
  background-color: orange;
  color: blue;
}

li:hover h1:not(:hover) {
  color: white;
}
<ul>
  <li>
    <h1>Home</h1>
  </li>
</ul>

Upvotes: 1

Robin
Robin

Reputation: 5427

In normal css:

li:hover h1 {
    color: red;
}

In scss: 

li:hover {
    h1 {
       color: red;
    }
}

Upvotes: 5

Related Questions