悬停时更改子元素属性

Posted 2023-05-08

【中文标题】悬停时更改子元素属性

【英文标题】：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>

【问题讨论】：

对不起，我的意思是 h1 标签，已修复

【参考方案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>