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

Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со "звездочками". В данном уроке представлена идея, как сделать интерфейсную часть рейтинга без JavaScript несколькими строчками кода CSS.

В разметке используется символ юникода звезда (?). Если вы устанавливаете для своих документов кодировку UTF-8, то все должно пройти без проблем. В качестве альтернативы можно использовать ☆. Можно устанавливать столько звезд, сколько захочется:

<div class="rating">
	<span>?</span><span>?</span><span>?</span><span>?</span><span>?</span>
</div>

Далее нужно преобразовать "пустую" звезду в "заполненную" при наведении курсора мыши (поискать такой символ можно на сайте Gallery). легко решается путем размещения псевдо-элемента с "заполненной" звездой (?) сверху для псевдо-класса :hover:

.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

Просто абсолютно позиционируем элемент, по умолчанию в большинстве браузеров используются свойства  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;
}

Получаем работающий шаблон. Вот полный код:

.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;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/uTntryXs5KY/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Звездный рейтинг на CSS | | 2012-06-19 12:00:03 | | Статьи Web-мастеру | | Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со звездочками. В данном уроке представлена идея, как сделать | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: