В верстке для звезды используется единица уникода (☆). Если у вас стоит кодировка UTF-8, то здесь не будет проблем. В противном случае вы можете использовать ☆. Вы можете использовать столько звезд, сколько пожелаете:
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
Теперь нам нужно при наведении заменить эту «пустую» звезду «твердой». Вы можете просто создать псевдо элемент твердой звезды (★) поверх нее при событии :hover
.rating > span:hover:before {
content: "2605";
position: absolute;
}
P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)
В силу того, что элемент имеет абсолютное позиционирование, мы применяем top: 0; left: 0; (как минимум в новых браузерах). Таким образом, получается, что твердая звездочка сидит прямо поверх пустой. Вы даже можете изменить ее размер или цвет, если пожелаете.
Но тем не менее, то, что есть у нас, работает только с отдельными звездами. Наша структура UX требует того, чтобы все звезды были заполнены. Например, если мы наведем на 4-ю звезду, то не только она должна быть заполнена, но также и 3-я, 2-я и 1-я.
Невозможно посредством CSS выделить предыдущие дочерние элементы. Тем не менее, у нас есть возможность выделить последующие дочерние элементы. Например, посредством смежного или общего родственного комбинатора. Если мы буквально перевернем очередность символов, то сможем использовать общий родственный комбинатор для того, чтобы выделять звезды, расположенные до той звезды, на которую был наведен курсор мыши (так как фактически, в коде HTML будут выделены последующие звезды, просто отображены они у нас в перевернутом порядке).
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)
И на этом всё! Полноценная UX-структура с использованием чуточки кода. Вот весь код CSS, за счет которого данный элемент будет работать:
.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;
}
P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)
* Посмотреть демо
Применение на практике
Если вероятность, что javascript все же будет включен в данную структуру. Когда пользователь кликает на звезду, сведения о рейтинге отправляются обратно посредством Ajax, а сам виджет запускает класс для мгновенного отображения выбранного числа звезд. Если javascript уже используется в проекте, не будет ли полезно хотя бы звездный рейтинг организовать без использования данной технологии? Если ваше приложение полноценно зависит от javascript, то не беспокойтесь за работу данного элемента. Если вы заинтересованы в разработке веб-сайта, который будет работать и без javascript, то данный пример реализации как раз подойдет вам. Советуем также взглянуть на пример реализации от Леа Вероу (Lea Verou), где используются радио-кнопки, что позволяет сделать элемент частью формы, которую можно подтвердить и без применения JS.