SOURCE

var oBigBox = document.getElementById("bigbox"),
    oCube = oBigBox.getElementsByClassName("cube");
  for (var i = 0; i < oCube.length; i++) {
    //定义一个属性index，使得第i个的index值为i；
      oCube[i].index = i;
  }
    //为每一个.cube添加事件
  for (i = 0; i < oCube.length; i++) {
    oCube[i].addEventListener("mouseenter",setInColor);//添加鼠标进入事件
    oCube[i].addEventListener("click",setScore);//添加鼠标点击事件
    oCube[i].addEventListener("mouseleave",setLeave);//添加鼠标离开事件
  }
  //鼠标进入事件
  function setInColor(){
    //小于当前对象的index值得背景颜色为#4169E1
    for (i = 0; i <= this.index; i++) {
      oCube[i].style.backgroundColor = "#4169E1";
    }
  }
  //鼠标点击事件
  function setScore(){
    for (i = 0; i < oCube.length; i++) {
    }
    alert("评分为"+(this.index+1)+"分，谢谢");
  }
  //鼠标离开事件
  function setLeave(){
    for (i = 0; i < oCube.length; i++) {
      oCube[i].style.backgroundColor = "#FFFFFF";
    }
  }

<div id="bigbox">
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
</div>

*{margin: 0;padding: 0;}
.cube{
  width: 48px;
  height: 48px;
  border: 1px solid lightblue;
  background-color: #FFFFFF;
  float: left;
  cursor: pointer;
}