CSS hover change another div within another seperate wrapper div - 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

CSS hover change another div within another seperate wrapper div

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">
.a:hover~.c,<!--from  w  w w  . j  a  v  a 2  s .c  om-->
.a:hover~#box .c {
   background:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div class="a">
    Lorem i 
  </div> 
  <div class="b">
    Lorem i 
  </div> 
  <div class="c">
    Lorem i 
  </div> 
  <br> 
  <br> 
  <div class="a">
    Lorem i 
  </div> 
  <div class="b">
    Lorem i 
  </div> 
  <div id="box"> 
   <div class="c">
     Lorem i 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials