[Noonf]

Здравствуйте! Есть форма для добавления отзыва, в ней планируется выставление оценки (от 1 до 5 звезд ). Подскажите пожалуйста как сделать так, чтобы при наведении img пустой звезды (star.png) менялся на img красной звезды (star_red.png), а при клике фиксировался на выбранной. Сам смог сделать только смену при наведении через display:none/display:inline, но думаю все сложнее )

Такую фишку подсмотрел вот на этом сайте: https://molnar.by/otzyvy

Вот html формы:

<div class="stars">
<span class="star f28px required">Оценка</span>
<a class="star_1"><img class="star_img str_1" src="images/reviews/star.png"><img class="str_full_1" src="images/reviews/star_red.png"></a>
<a class="star_2"><img class="star_img str_2" src="images/reviews/star.png"></a>
<a class="star_3"><img class="star_img str_3" src="images/reviews/star.png"></a>
<a class="star_4"><img class="star_img str_4" src="images/reviews/star.png"></a>
<a class="star_5"><img class="star_img str_5" src="images/reviews/star.png"></a>
</div>

А вот CSS:

.stars {
	padding-top: 23px;
}

.star {
	width: 405px;
	height: 35px;
	margin-left: 40px;
	
}

.star_img {
	width: 34px;
	height: 32px;
	margin: 0 0 -5px 20px;
	padding-top: 10px;
	cursor: pointer;
}

.star_img_full {
	width: 34px;
	height: 32px;
	margin: 0 0 -5px 20px;
	padding-top: 10px;
	cursor: pointer;
	display: none;
}

.botton_reviews {
	float: right;
	border:none;
	width: 215px;
	height: 30px;
	background-color: #c40000;
	padding-top: 4px;
	margin: -32px 32px 0 0;
}