Не могу задать правильное поведение hover

233

19 апреля 2017, 12:07

Всем привет. Почти сделал рейтинг со звездами, как вдруг проблема с наведением по ним... Вот код - https://jsfiddle.net/dokgkxza/

<div style="width: 800px;">

С левой стороны на правую нормально работает, но если наоборот вести курсор то будет подсвечиваться только первый элемент на который навел...

Добавил z-index: 20; к спан ховер, а к обычному спан z-index: 30; ... но это далеко не идеал...
Код дубль 2 - https://jsfiddle.net/dokgkxza/1/

Answer 1

Вот работающий пример (только вместо звездочек кружочки)

.star-item span:hover ~ span label,
.star-item span:hover label,
.star-item span.checked label,
.star-item span.checked ~ span label {
    background:#F90;
    color:#FFF;
}

Как сделать звездочки без картинок на чистом css

А вобще как я понимаю это типовая задачка (даже в яндексе ее дают), есть смысл посмотреть готовое решение и его повторить, не изобретая свой велосипед.