Звездный рейтинг на CSS
Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со "звездочками". В данном уроке представлена идея, как сделать интерфейсную часть рейтинга без JavaScript несколькими строчками кода CSS.
В разметке используется символ юникода звезда (?). Если вы устанавливаете для своих документов кодировку UTF-8, то все должно пройти без проблем. В качестве альтернативы можно использовать ☆. Можно устанавливать столько звезд, сколько захочется:
<div class="rating">
<span>?</span><span>?</span><span>?</span><span>?</span><span>?</span>
</div><br>
Далее нужно преобразовать "пустую" звезду в "заполненную" при наведении курсора мыши (поискать такой символ можно на сайте Gallery). легко решается путем размещения псевдо-элемента с "заполненной" звездой (?) сверху для псевдо-класса (:hover:)
.rating > span:hover:before {
content: "\2605";
position: absolute;
}<br>
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}<br>
Получаем работающий шаблон. Вот полный код:
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}<br>