@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?

Пытаюсь сделать звёздный рейтинг для сайта с использованием иконок шрифта.
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы