Question

嗨朋友们，我希望在父元素上添加hsc on children元素，如。

<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;
}

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

1 个答案: