Смена изображений при наведении и фиксация при клике
Здравствуйте! Есть форма для добавления отзыва, в ней планируется выставление оценки (от 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: Код:
|
рейтинг звёздочками
|
Спасибо огромное! Как всегда очень помогли!!! )
|
звездный рейтинг
Noonf,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.rating {
list-style: none;
padding: 0px;
margin: 0px;
cursor: default;
font-size: 0px;
user-select: none;
display: inline-block;
position: relative;
}
.rating:after {
font-size: 36px;
top: 4px;
left: 100%;
content: attr(text);
color: #FF0000;
display: block;
position: absolute;
margin-left: 12px;
}
.rating > li {
display: inline-block;
font-size: 36px;
cursor: pointer;
}
.rating > li::before {
content: "★"
}
.stars a.active,
.rating > li.active,
.rating:hover > li {
color: orange;
}
.rating:hover > li:hover ~ li{
color: #000000;
}
.stars a{
font-size: 36px;
cursor: pointer;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.rating, .stars span'), function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
var method = "add", elem = event.target;
[].forEach.call( item.children, function(el, i) {
el.classList[method]('active');
if(el == elem) {
method = "remove";
item.setAttribute("text", ++i)
}
});
});
});
});
</script>
</head>
<body>
<ul class="rating" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> <br>
<p class="stars">
<span >
<a class="star-1">★</a>
<a class="star-2">★</a>
<a class="star-3">★</a>
<a class="star-4">★</a>
<a class="star-5">★</a>
</span>
</p>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:46. |