CodePen

HTML

            
              <div class="wrap">
  
  <div class="box-one">
    Hello everybody!
  </div>
  
  <div class="box-two">
    Hello everyone
  </div>
  
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrap {
  margin: 30px auto 0 auto;
  width: 410px;
  height: auto;
  overflow: hidden;
  color: white;
  font: 17px Arial;
}

.box-one {
  height: 100px;
  width: 200px;
  background: darkgreen;
  float: left;
  padding: 15px;
}

.box-two {
  height: 100px;
  width: 200px;
  background: green;
  float: left;
  margin-left: 10px;
  padding: 15px;
}

.blue {
  background: blue;
}

.red {
  background: red; 
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  var $box1 = $(".box-one");  
  var $box2 = $(".box-two");

  $box1.hover(function() {
    var $this = $(this);
    $this.toggleClass('red');
    $box2.toggleClass('blue');
  })
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................