Смена изображений при наведении и фиксация при клике
Здравствуйте! Есть форма для добавления отзыва, в ней планируется выставление оценки (от 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, время: 15:45. |