@Rokis
Не стыдно спрашивать, стыдно не пытаться...

Как сделать 1 hover на несколько элементов :before?

Здравствуйте.

Есть HTML:
<ol class="rating show-current">
<li class="icon-star-empty">5</li>
<li class="icon-star-empty">4</li>
<li class="icon-star-empty">3</li>
<li class="icon-star-empty">2</li>
<li class="icon-star-empty">1</li>
</ol>


И CSS:

.vote-block .rating li:nth-child(5):hover:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}
.vote-block .rating li:nth-child(4):hover:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

.icon-star-empty:before { content: '\e801';}


Этот вариант работает нормально, когда я пытаюсь сделать так, чтобы при наведении на второй символ менялся ещё и первый, то ничего не работает.
Пример:
.vote-block .rating li:nth-child(4):hover:before, .vote-block .rating li:nth-child(4):hover:before .vote-block .rating li:nth-child(5):before {content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}


Как правильно написать, чтобы можно было при наведении на второй li элемент менять 1 и 2, на 3 - менять 1, 2 и 3, на 4 - менять 1, 2, 3, 4, на 5 - менять 1, 2, 3, 4, 5?

Пытаюсь сделать звёздный рейтинг для сайта с использованием иконок шрифта.
  • Вопрос задан
  • 1296 просмотров
Решения вопроса 1
@Rokis Автор вопроса
Не стыдно спрашивать, стыдно не пытаться...
Разобрался сам. Использовал такой код:
.icon-star-empty:hover:before,
.icon-star-empty:hover ~ .icon-star-empty:before
{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Только так :
.rating show-current::hover icon-star-empty:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

или скриптом
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы