staring2

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

ul{
    list-style: none;
    width: 150px;
    height: 29px;
    
    margin: 30px;
}
li{
    float: left;
    width: 30px;
    height: 25px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTE1IC0xNSAzMCA1MCI+CjxwYXRoIGQ9Ik0tNi40Nyw4LjkwIEwwLjAwLDUuMDAgNi40Nyw4LjkwIDQuNzYsMS41NSAxMC40NiwtMy40MCAyLjk0LC00LjA1IDAuMDAsLTExLjAwIC0yLjk0LC00LjA1IC0xMC40NiwtMy40MCAtNC43NiwxLjU1eiIKc3R5bGU9InN0cm9rZTpibGFjaztzdHJva2Utd2lkdGg6MXB4O2ZpbGw6bm9uZSIvPgo8cGF0aCBkPSJNLTYuNDcsMzMuOTAgTDAuMDAsMzAuMDAgNi40NywzMy45MCA0Ljc2LDI2LjU1IDEwLjQ2LDIxLjYwIDIuOTQsMjAuOTUgMC4wMCwxNC4wMCAtMi45NCwyMC45NSAtMTAuNDYsMjEuNjAgLTQuNzYsMjYuNTV6IgpzdHlsZT0ic3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDoxcHg7ZmlsbDp5ZWxsb3ciLz4KPC9zdmc+);
}
.active{
    background-position-y: -25px;
}

JavaScript

var aLi = document.getElementsByTagName('li');
var current = -1;

window.onclick = function(event) {
  for (i=0; i<aLi.length;i++){
    if (event.target != aLi[i]) aLi[i].className = null;
  }
}


for(i=0;i<aLi.length;i++){
  aLi[i].index = i;
  aLi[i].onmouseover = function(){ staring(this.index); }
  aLi[i].onmouseout = function(){ staring(current);}
  aLi[i].onclick = function(){ current = this.index;  }
}

function staring(index){
  for(let j=0;j<aLi.length;j++){
    if(j<=index){
      aLi[j].className = 'active';
    }else{
      aLi[j].className = null;
    }
  }
}