html - 悬停时更改子元素属性

Question

当鼠标悬停在“li”标签上时，我希望“h1”标签的颜色发生变化。我尝试按照此处提供的答案进行操作：CSS :: child set to change color on parent hover，但在悬停时也会发生变化，但这对我不起作用。

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

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

标签： htmlcss

Answer 1

在普通的 CSS 中：

li:hover h1 {
    color: red;
}

在 scss 中：

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