[bes]

<span id="mySpan">text</span>

<ul id="myList">
  <li>red</li>
  <li>green</li>
  <li>blue</li>
</ul>

<script>
window.onload = function() {
  var span = document.getElementById('mySpan');
  var list = document.getElementById('myList');
  var len = list.children.length;
  for (var i = 0; i < len; i++) {
    list.children[i].style.background = list.children[i].innerHTML;
  }

  list.onmouseover = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;
    span.innerHTML = target.innerHTML;
    span.style.color = target.style.backgroundColor;
  }

  list.onmouseout = function () {
    span.innerHTML = 'text';
    span.style.color = 'black';
  }

}
</script>