Add Hover effect for two elements at the same time - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Effect

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Effect

Description

Add Hover effect for two elements at the same time

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">
#dad:hover #bro {<!-- w  w w  .  ja v a 2s  .c o m-->
   background:red;
}

#dad:hover #sis {
   background:green;
}
</style> 
 </head> 
 <body> 
  <div id="dad"> 
   <div id="bro">
     Lor 
   </div> 
   <div id="sis">
     Lor 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials