Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~
) para cambiar el color a las estrellas (label
) que se encuentren después del input
marcado.
Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:
p.clasificacion {
position: relative;
overflow: hidden;
display: inline-block;
}
p.clasificacion input {
position: absolute;
top: -100px;
}
p.clasificacion label {
float: right;
color: #333;
}
p.clasificacion label:hover,
p.clasificacion label:hover ~ label,
p.clasificacion input:checked ~ label {
color: #dd4;
}
<p class="clasificacion">
<input id="radio1" type="radio" name="estrellas" value="5">
<label for="radio1">★</label>
<input id="radio2" type="radio" name="estrellas" value="4">
<label for="radio2">★</label>
<input id="radio3" type="radio" name="estrellas" value="3">
<label for="radio3">★</label>
<input id="radio4" type="radio" name="estrellas" value="2">
<label for="radio4">★</label>
<input id="radio5" type="radio" name="estrellas" value="1">
<label for="radio5">★</label>
</p>