changing child element property on hover

Question

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>

Answer 1

In normal css:

li:hover h1 {
    color: red;
}

In scss:

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

Answer 2

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>

Answer 3

This worked for me.

li{
  width: 100vw;
  }
li:hover{
  background-color: orange;
  }
li h1:hover {
  color: white;
  }

<ul>
  <li><h1>Home</h1></li>
</ul>