悬停时更改子元素属性答案

【问题标题】：changing child element property on hover悬停时更改子元素属性
【发布时间】：2019-11-27 15:19:16
【问题描述】：

当鼠标悬停在“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>

【问题讨论】：

标签： html css

【解决方案1】：

在普通的 css 中：

li:hover h1 {
    color: red;
}

在scss中：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这对我有用。

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

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

【讨论】：