mouseover на 6 блоках

'use strict'; 
 
function hover(event) { 
  var target = event.target; 
  var shield = document.querySelector('.shield'); 
 
  if (target.tagName != 'TD') { 
    return; 
  } 
  shield.style.backgroundColor = getComputedStyle(target).backgroundColor; 
} 
 
var table = document.querySelector('table'); 
table.addEventListener('mouseover', hover);

table tr td { 
  width: 100px; 
  height: 100px; } 
  table tr td:nth-child(1) { 
    background-color: #DA4D4D; } 
  table tr td:nth-child(2) { 
    background-color: #CDDC39; } 
  table tr td:nth-child(3) { 
    background-color: #FFC107; } 
  table tr td:nth-child(4) { 
    background-color: #E1E1E1; } 
  table tr td:nth-child(5) { 
    background-color: #03A9F4; } 
  table tr td:nth-child(6) { 
    background-color: #795548; } 
 
.shield { 
  margin: 20px 2px; 
  width: 620px; 
  height: 300px; }

  <table> 
    <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
    </tr> 
  </table> 
  <div class="shield"></div>

var container = document.querySelector('.container'); 
for (var i = 0; i < container.childNodes.length; i++) { 
  container.childNodes[i].addEventListener("mouseover", changeColor); 
} 
 
function changeColor() { 
  var color = $(this).css("background"); 
  $('.detector').css('background', color); 
}

.container { 
  display: flex; 
  width: 900px; 
  height: 100px; 
  justify-content: space-around; 
} 
 
.detector { 
  width: 900px; 
  height: 100px; 
} 
 
.item { 
  margin: auto; 
  width: 100px; 
  height: 100px; 
  background: red; 
} 
 
#i1 { 
  background: red; 
} 
 
#i2 { 
  background: yellow; 
} 
 
#i3 { 
  background: green; 
} 
 
#i4 { 
  background: orange; 
} 
 
#i5 { 
  background: black; 
} 
 
#i6 { 
  background: magenta; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="item" id="i1"></div> 
  <div class="item" id="i2"></div> 
  <div class="item" id="i3"></div> 
  <div class="item" id="i4"></div> 
  <div class="item" id="i5"></div> 
  <div class="item" id="i6"></div> 
</div> 
<div class="detector"> 
 
</div>