Estoy intentando hacer puntuaciones con estrellas y que al pasar por encima de cada una, se aplique una clase css. El caso es que se me aplica a todas las estrellas a la vez y mi intención es que solo se aplique cuando pases el ratón por encima de principio a fin y que se queden fijadas conforme sube la puntuación y solo mientras tengas el ratón encima.
Aquí va lo que tengo hecho.
var estrella = document.getElementsByClassName("star");
function inclinar() {
for(var i = 0; i < estrella.length; i++) {
estrella[i].className += " inclinada";
}
}
function desinclinar() {
for(var i = 0; i < estrella.length; i++) {
estrella[i].classList.remove("inclinada");
}
}
for(var i = 0; i < estrella.length; i++) {
estrella[i].addEventListener('mouseenter', inclinar);
estrella[i].addEventListener('mouseleave', desinclinar);
}
.stars ul {
list-style-type:none;
padding:0;
}
.stars ul > li.star {
display:inline-block;
font-size:2.5em;
color:#ccc;
}
.stars ul > li.star.inclinada {
color:#FFCC31;
transform: rotate(20deg);
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>
<div class="stars text-center">
<ul id="stars">
<li class="star" data-value="1">
<i class="fas fa-star"></i>
</li>
<li class="star" data-value="2">
<i class="fas fa-star"></i>
</li>
<li class="star" data-value="3">
<i class="fas fa-star"></i>
</li>
<li class="star" data-value="4">
<i class="fas fa-star"></i>
</li>
<li class="star" data-value="5">
<i class="fas fa-star"></i>
</li>
</ul>
</div>
Gracias!