<div id="wrap">

  <!-- section -->
  <div class="section">
    <div class="center">

      <div id="blocks">
        <div class="block block--red"></div>
        <div class="block block--green"></div>
        <div class="block block--blue"></div>
      </div>
      
      <div id="target"></div>

    </div>
  </div>
  <!--/section -->

</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 40px;
}

#blocks {
  display: flex;
  margin-bottom: 20px;
}

.block {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  cursor: pointer;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &--red {
    background-color: red;
  }
  
  &--green {
    background-color: green;
  }
  
  &--blue {
    background-color: blue;
  }
}

#target {
  width: 50px;
  height: 50px;
  background-color: #000;
}

$(function () {
  var $target = $('#target'),
    targetDefaultBg = $target.css('background-color');

  $('#blocks .block')
    .on('mouseover', function () {
      var $thisBlock = $(this),
        blockBg = $thisBlock.css('background-color');
    
      $target.css({
        backgroundColor: blockBg
      });
    })
    .on('mouseleave', function () {
      $target.css({
        backgroundColor: targetDefaultBg
      });
    });
});