CODEWITHSUNDEEP
css
Renish Khunt
Renish Khunt

Reputation: 5824

Applay CSS on children element when hover on parent element hover?

hi friends i want to applay css on children element when hove on parent element like.

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

i want hover on the li tag when change the background of li tag and with the change color of a tag.

i don't know how to change children element css to hover on parent element.

please help.

thank you

Upvotes: 0

Views: 45

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

li:hover a {
      color: red;
}

li:hover {
      background: green;
}

also, sometimes you might need to add this to a

.nav_menu a {
     display: inline-block;
}

Upvotes: 1

Related Questions