Тебе нужно обернуть свои инпуты в div в данном случае дадим ему id="cool-stars" и сразу прописать начальный класс class="icon-large-stars-0", теперь каждому input даешь класс class="rating-hide". В итоге у тебя должна получиться следующая структура: <div id="rating-updated" class="icon-large-stars-0"> <input type="radio" name="rating" value="1" class="rating-hide" /> <input type="radio" name="rating" value="2" class="rating-hide" /> <input type="radio" name="rating" value="3" class="rating-hide" /> <input type="radio" name="rating" value="4" class="rating-hide" /> <input type="radio" name="rating" value="5" class="rating-hide" /> </div>
Теперь создадим css стили. Я добавлю свою картинку , если что, можешь выбрать изображение и получше. <style> .rating-hide { opacity: 0; float: left; cursor: pointer; height: 14px; width: 14px; } #rating-updated { background-image: url("../image/pic1.png"); background-repeat: no-repeat; display: inline-block; vertical-align: text-top; height: 13px; width: 74px; } .icon-large-stars-0 { background-position: 0 -272px; } .icon-large-stars-1 { background-position: 0 -288px; } .icon-large-stars-2 { background-position: 0 -304px; } .icon-large-stars-3 { background-position: 0 -320px; } .icon-large-stars-4 { background-position: 0 -336px; } .icon-large-stars-5 { background-position: 0 -352px; } </style>
И последний шаг, немного js <script> /*stars rating*/ 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 ); }); </script>