悬停时更改子元素属性

Question

当鼠标悬停在“ li”标签上时，我希望更改“ h1”标签的颜色。 我尝试按照此处提供的答案进行操作：CSS :: child set to change color on parent hover, but changes also when hovered itself，但这对我没有用。

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

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

Answer 1

在普通CSS中：

li:hover h1 {
    color: red;
}

在scss中：

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

Answer 2

您只需要在CSS中设置color属性：

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

这对我有用。

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

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