Так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.graph {
width: 50px;
display: inline-block;
transition: opacity 0.3s linear
}
</style>
</head>
<body>
<div class='graph' id='green'></div>
<div class='graph' id='red' ></div>
<div class='graph' id='blue'></div>
<div class='graph' id='yellow'></div>
<div class='graph' id='black'></div>
<div id="info"></div>
<script>
var arr = ['green','red','blue','yellow','black'],
arr2 = [400, 200, 50, 300, 500],
graph = document.querySelectorAll('.graph'),
info = document.getElementById('info');
for(i = 0; i < arr.length; i++){
graph[i].style.backgroundColor = arr[i];
graph[i].style.height = arr2[i] + 'px';
graph[i].addEventListener('mouseover', aaa);
graph[i].addEventListener('mouseout', bbb);
}
function aaa(e){
Array.prototype.forEach.call(graph, function(item) {
if(item != e.target) {
item.style.opacity = "0.3";
}
});
info.innerHTML = check(arr2[i]);
}
function bbb(){
Array.prototype.forEach.call(graph, function(item) {
item.style.opacity = "1";
});
info.innerHTML = '';
}
function check(num){
if(num<100)
return 'bad';
if(num >= 100 && num < 200)
return 'soso';
if(num >= 200 && num < 300)
return 'ok';
if(num >= 300 && num < 400)
return 'good';
if(num >= 400 && num < 500)
return 'faken good';
else
return 'amazing';
}
</script>
</body>
</html>
http://jsbin.com/gohugocuce/1/edit?html,js,output