当将鼠标悬停在父元素上时，将CSS应用于子元素吗？

Question

嗨，朋友，当我喜欢上父元素时，我想在children元素上添加CSS。

<html>


<head></head>
  <style>
  .nav_menu{
      width:100%;
  }
  .nav_menu ul{
     list-style-type:none;
     list-style:none;
  }
  .nav_menu ul li{
     display:inline-block;
     padding:10px 20px;
     background:#000000;
     margin-left:10px;
  }
  .nav_menu ul li a{
     text-decoration:none;
     color : #FFFFFF;
  }
  // i alread try to write .nav_menu ul li:hover + a or 
  //.nav_menu ul li:hover, a
  .nav_menu ul li:hover ~ a{ 
     background : #FFFFFF;
     color : #000000;
  }
  </style>
  <body>
     <div class='nav_menu'>
         <ul>
             <li><a href='#'>Home</a></li>
             <li><a href='#'>Home</a></li>
             <li><a href='#'>Home</a></li>
             <li><a href='#'>Home</a></li>
         </ul>
     </div>
  </body>
</html>

我想悬停在了li改变的背景下，当标签li的标签，并与变化颜色a标签。

我不知道如何将子元素css更改为悬停在父元素上。

请帮忙。

谢谢

Answer 1

li:hover a {
      color: red;
}

li:hover {
      background: green;
}

另外，有时您可能需要将此添加到

.nav_menu a {
     display: inline-block;
}