Change property of element when hovering over another element - 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

Change property of element when hovering over another element

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">
.sub-menu a:hover~#menu-item-2 a {
   background-color:Chartreuse;
}

.sub-menu a:hover>#menu-item-2 a {
   background-color:yellow;
}

.sub-menu:hover {
   background:white;
}

.sub-menu a:hover + #menu-item-2 a {
   background-color:blue;
}

#menu-item-2:hover {
   background:red;
}
</style> <!--   www. ja  va 2 s. com-->
 </head> 
 <body> 
  <ul class="main-nav"> 
   <li id="menu-item-1"> <a>Lore</a> </li> 
   <li id="menu-item-2"> <a>Lorem</a> 
    <ul class="sub-menu"> 
     <li> <a>Lorem ips</a> </li> 
    </ul> </li> 
   <li id="menu-item-3"> <a>Lorem ip</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials