Problem with Hover rating system

Question

Good night,

And the seguite I made a rating system for my site it is working well only missing something that I am not able to do. I have the rating from 1 to 10 where it is like this 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 and 5 this working just wanted to pass the mouse over it makes Hover for another color and wanted to depending on passing the mouse the other options of the rating stay-if activated with color at this time only activates one which and which.

HTML

<div class="rate-ex1-cnt">
    <div id="0.5" class="rate-btn-0.5 rate-btn"></div>
    <div id="1" class="rate-btn-1 rate-btn"></div>
    <div id="1.5" class="rate-btn-1.5 rate-btn"></div>
    <div id="2" class="rate-btn-2 rate-btn"></div>
    <div id="2.5" class="rate-btn-2.5 rate-btn"></div>
    <div id="3" class="rate-btn-3 rate-btn"></div>
    <div id="3.5" class="rate-btn-3.5 rate-btn"></div>
    <div id="4" class="rate-btn-4 rate-btn"></div>
    <div id="4.5" class="rate-btn-4.5 rate-btn"></div>
    <div id="5"class="rate-btn-5 rate-btn"></div>
</div>

Jquery

<script>
    $(function(){ 
        $("#sent-form-msg").hide();

        $('.rate-btn').hover(function(){
            $('.rate-btn').removeClass('rate-btn-hover');
            var therate = $(this).attr('id');
            for (var i = therate; i >= 0; i--) {
                $('.rate-btn-'+therate).addClass('rate-btn-hover');
                $("#rating_number").text(therate);
            }
        });

        $('.rate-btn').click(function(){ 
            var logado = "<?= $_SESSION['user_id'] ?>"; 
            if(logado === ''){ 
                alert("Para avaliar o estabelecimento precisa estar logado aceda ao menu login para entrar na sua conta");
            }else{   
                var therate = $(this).attr('id');
                id_user_rate = "<?= $_SESSION['user_id'] ?>";
                var dataRate = 'act=rate&post_id=<?= $row->id; ?>&user_id='+id_user_rate+'&rate='+therate; //
                $('.rate-btn').removeClass('rate-btn-active');
                for (var i = therate; i >= 0; i--) {
                     $('.rate-btn-'+therate).addClass('rate-btn-active');
                     $("#rating_number").text(therate);
                }
                $.ajax({
                    type : "POST",
                    url : "ajax/processa_avaliacao.php",
                    data: dataRate,
                    success: success()
                });

                function success(){
                    $("#avaliacao").load("ajax/mostra-avaliacao.php?id_estabelecimento=<?= $row->id; ?>");
                    $("#numero_votos").load("ajax/mostra-votos.php?id_estabelecimento=<?= $row->id; ?>");
                    $("#sent-form-msg").fadeIn();
                    $("#sent-form-msg").fadeOut(5500).html("<p align='center'>Avaliação Submetida com sucesso! Obrigado pelo seu voto</p>");
                }
                return false; 
            }                   
        });
    });
</script>

Answer 1

You can use the .prevAll() for this, it selects all the siblings previous to this element. I also use the .andSelf() to join the element you are having :hover.

The code would look like this:

var rates = $('.rate-btn');
rates.hover(function () {
    rates.removeClass('rate-btn-hover');
    $(this).prevAll().andSelf().addClass('rate-btn-hover')
});

jsFiddle: http://jsfiddle.net/kapg3q98/

You can also join

$('.rate-ex1-cnt').on('mouseleave', function(){
    rates.removeClass('rate-btn-hover');
});

to ensure that the class is removed on all elements when the mouse exits.

jsFiddle: http://jsfiddle.net/kapg3q98/1/