zulyamodx,
можно но в глазах рябит от классов
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #EE82EE;
}
.free:hover .star-rating, .star-rating-control.hover .star-rating{
background-position: 0px -113px;
color: #FFD700;
}
.free:hover .star-rating:hover ~ .star-rating, .star-rating-control.hover .star-rating.hover ~ .star-rating {
background-position: 0px 1px;
color: #3DC430;
}
.star-rating{
cursor: pointer;
text-align: center;
line-height: 34px;
background-position: 0px 1px;
background-image: url(http://kredito.com.ua/bitrix/template/kredito/files/stars-full.svg);
background-repeat: no-repeat;
background-size: cover;
width: 30px;
height: 30px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".star-rating-control").each(function(indx, el){
$(el).on('click', '.star-rating', function(event) {
event.preventDefault();
if(!$(el).is('.free')) return;
$(el).add(this).addClass('hover').removeClass('free');
var rating = +$('.star-rating',el).index(this);
$('input',el).val(++rating);
})
});
});
</script>
</head>
<body>
<span class="star-rating-control free">
<input type="hidden" name="rate1_1" value="">
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_0">
<a title="1">1</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_1">
<a title="2">2</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_2">
<a title="3">3</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_3">
<a title="4">4</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_4">
<a title="5">5</a>
</div>
</span>
</body>
</html>