Hover one list item and change current item and its parent item - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change

Description

Hover one list item and change current item and its parent item

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.main-parent:hover a.parent {
   color:Chartreuse;
}

.child-ul a:hover {
   color:yellow;
}
</style> <!--from   w  ww .  j a  va 2s  .  c o m-->
 </head> 
 <body> 
  <ul class="main-parent"> 
   <li> <a class="parent" href="#">Lorem ipsum</a> 
    <ul class="child-ul"> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
     <li> <a href="#">Lorem ipsu</a> </li> 
    </ul> </li> 
  </ul>  
 </body>
</html>

Related Tutorials