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

Question

[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>

Answer 1

[igumenov]

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

Comments

[Aison]

не вариант, я бы тогда просто direction заюзал у него и кросс лучше.

как раз инверсия не нужна, но похоже нету норм решения.

[IIIu6ko]

Aison, имхо, проще через js ховер обработать

[Aison]

IIIu6ko, если это может сделать css, то это делает он. тоже имхо

[IIIu6ko]

Aison, С таком разметкой как у вас придётся класс добавлять с помощью js, чтобы зафиксировать это всё дело. Лучше тогда делайте с помощью радиокнопок.

[Aison]

IIIu6ko, нет) js вообще не использовал, проблему решил просто. изменил направление рейтинга и накинул на родителя direction: rtl; рейтинг сие не я реализовывал, я лишь оформляю его.

[IIIu6ko]

Aison, Чтобы выбрать рейтинг, например 3 звезды, что делать? Будешь писать обработчик на JS и класс добавлять, правильно?

[Aison]

IIIu6ko, upd UP

[IIIu6ko]

Aison, Я про то, что тут всё равно в рейтинге придётся использовать JS.

[Aison]

IIIu6ko, скажу так: мне было рентабельно использовать этот вариант. кто-то пусть через js обрабатывает.

[IIIu6ko]

Aison, Просто лучше всю логику в одном месте делать.

[Aison]

IIIu6ko, это dle, за меня там уже сделали логику. я лишь подстраиваю свои таланты под эту реализацию) если бы не вышло реализовать задуманное, то другому варианту - да, а так, всё пучком.