Звездный рейтинг на CSS

Звездный рейтинг на 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>
Просто абсолютно позиционируем элемент, по умолчанию в большинстве браузеров используются свойства (top: 0; left: 0;). Поэтому "заполненная" звезда попадает поверх "пустой" звезды. Можно также изменить цвет.
Но так мы имеем дело только с одной звездой. А правила шаблон интерфейса требуют, чтобы все звезды были "заполнены". Например, если курсор мыши наволится поверх 4-й звезды, то все 4-е звезды должны стать "заполненными", то есть 1-я, 2-я, 3-я и 4-я.
В CSS нет способа для выбора предыдущих дочерних элементов. Но есть способ выбрать последующие дочерние элементы с помощью комбинаторов соседних элементов. Если мы изменим порядок символов, то затем сможем использовать общий комбинатор соседних элементов для выбора всех звезд, которые стоят перед звездой с фокусом ввода визуально, но после нее в структуре документа HTML.
.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>


17:31
14
RSS
Нет комментариев. Ваш будет первым!