tengo el siguiente código en mi DOM:
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
Necesito que al hacer hover sobre uno de los elementos, este y todos los que estén por delante adquieran una clase llamada "yellow". Es decir, si pongo el cursor en el tercer , debería meterme la clase "yellow" en el primero, el segundo y el tercero.
Esto lo estoy haciendo con jquery de la siguiente manera:
$(".stars span a").each(function (index) {
$(this).hover(function () {
if (index + 1 <= $(this).index() + 1) {
$(".stars span a").toggleClass("yellow")
}
});
});
Mi razonamiento es el siguiente: recorro todos los elementos y les añado el escuchador de hover. Después le digo que si index + 1 (este 1 es para que el usuario no tenga problemas con el 0) es menor o igual que la posición del elemento sobre el que tengo posicionado el cursor, entonces me pone la clase yellow. Si esta condición no se cumple, no pone nada y se queda como está.
Esto no hace nada y otras posibilidades que he probado me meten la clase yellow en los cinco elementos. Creo que es un problema de sintaxis pero ya no estoy seguro.
Gracias de antemano.