Change border color of both divs when hover on one div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Change border color of both divs when hover on one 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">

.upperdiv, .lowerdiv{<!--   w  ww  . ja  v  a  2  s.  co m-->
   width: 100px;
   height: 100px;
   border: 1px solid blue;
}
.upperdiv:hover, .upperdiv:hover+.lowerdiv{
   border-color: red;
}
      </style> 
 </head> 
 <body> 
  <div class="upperdiv">
    Some text 
  </div> 
  <div class="lowerdiv"> 
  </div>  
 </body>
</html>

Related Tutorials