Aison
@Aison

Ориентация рейтинга справа налево, но должно быть слева направо. Как исправить?

Есть звёздный рейтинг из 5 звёзд. Всё прекрасно, кроме того, что hover эффект работает странным образом. Звёзды заполняются не слева направо, а справа налево. Что за магия?

css
.rt-te a:hover svg,
.rt-te:hover ~ a svg {
	fill: #000;
}


html
<div class="rt-te">
	<a href="#" class="unit1"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.31l-7.437 4.507 1.972-8.451-6.535-5.69 8.62-0.732 3.38-7.944 3.38 7.944 8.62 0.732-6.535 5.69 1.972 8.451z"></path></svg></a>
	<a href="#" class="unit2"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.31l-7.437 4.507 1.972-8.451-6.535-5.69 8.62-0.732 3.38-7.944 3.38 7.944 8.62 0.732-6.535 5.69 1.972 8.451z"></path></svg></a>
	<a href="#" class="unit3"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.31l-7.437 4.507 1.972-8.451-6.535-5.69 8.62-0.732 3.38-7.944 3.38 7.944 8.62 0.732-6.535 5.69 1.972 8.451z"></path></svg></a>
	<a href="#" class="unit4"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.31l-7.437 4.507 1.972-8.451-6.535-5.69 8.62-0.732 3.38-7.944 3.38 7.944 8.62 0.732-6.535 5.69 1.972 8.451z"></path></svg></a>
	<a href="#" class="unit5"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.31l-7.437 4.507 1.972-8.451-6.535-5.69 8.62-0.732 3.38-7.944 3.38 7.944 8.62 0.732-6.535 5.69 1.972 8.451z"></path></svg></a>
</div>
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
@igumenov

В данном случае по hover нельзя обращаться к предыдущему элементу, обходится flex-direction инверсией
css подкорректировал
Ответ написан
Ваш ответ на вопрос

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

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