el problema es que estas recorriendo todas las estrellas y le estas aplicando la clase inclinada o lo mismo cuando quita el mouse. podes acceder al target, en este caso los li, donde aplicas los eventos de la siguiente manera var estrella = document.getElementsByClassName("star"); function inclinar(event) { var dataValue = event.target.getAttribute('data-value'); for(var i = 0; i < estrella.length; i++) { if(estrella[i].getAttribute('data-value') <= dataValue) estrella[i].className += " inclinada"; } } function desinclinar(event) { var dataValue = event.target.getAttribute('data-value'); for(var i = 0; i < estrella.length; i++) { if(estrella[i].getAttribute('data-value') > dataValue) estrella[i].className = "star"; } } for(var i = 0; i < estrella.length; i++) { estrella[i].addEventListener('mouseenter', inclinar); estrella[i].addEventListener('mouseleave', desinclinar); } el [jsfiddle][1] [1]: https://jsfiddle.net/xf7ote3o/18/