Не могу наладить рейтинг товара

[dimarist]

Все привет. В общем такая тема.

С простор интернета стырил код, который добавляет вместо точек рейтинга звездочки. Переделал под себя и свои звезды, но не могу наладить. 

Если навожу на вторую звезду, то загорается первая. После третей звезды идет все нормально (всего их 5).

 

 

 

<div id="rating-updated" class="icon-large-stars-0">

        <input type="radio" name="rating" value="1" class="rating-hide" />

и т.д.

 

 

Вот кусок стиля, думаю тут нужно копать:

 

.rating-hide { 

            opacity: 0;

            float: left;

            cursor: pointer;

            height: 25px; - вот тут

            width: 8px;  - и тут, думаю, что-то не сходится

  }

 

#rating-updated {  этот отвечает за общее расположение звезд

            

            margin: 0px 145px; 

            background-repeat: no-repeat;

            display: inline-block;

            vertical-align: text-top;

            height: 50px;

            width: 75px;

        }

.icon-large-stars-0 {

            background-image: - тут пошли картинки самих звезд

}

.icon-large-stars-1 и т.д. до 5

 

 

 

Скрипт: 

 

 

    jQuery('.rating-hide').hover(

            /*навел*/

            function(){

                var stars = jQuery(this).val();

                jQuery('#rating-updated').attr('class','icon-large-stars-'+ stars);

            },

            /*убрал*/

            function(){

                var start = jQuery('input:radio[name=rating]:checked').val()

                if(typeof  start == 'undefined' ){start = 0; }

                    jQuery('#rating-updated').attr('class','icon-large-stars-'+ start)

 

            })

    jQuery('.rating-hide').click(function(){

        /*убираем checked у всех элементов*/

        jQuery('.rating-hide').each(function(){

            jQuery(this).attr( 'checked', false )

        });

 

        /*добавляем checked необходимому элементу*/

        jQuery(this).attr( 'checked', true );

    });