Не работает рейтинг со звездами если блоков со звездами несколько на странице?

Question

[art_y10]

Пытаюсь использовать данное решение: https://codepen.io/andreacrawford/pen/NvqJXW
(Half stars, id="half-stars-example" заменил на class="half-stars-example")

Не работает рейтинг со звездами если блоков со звездами несколько на странице.
То есть в последующих блоках при наведении на звезды, звезды закрашиваются только у первого блока со звездами.

Есть ли решение на css без javascript?

Comments

[Rustam Bainazarov]

Есть ли решение на css без javascript?

Как бы ваш пример как раз на чистом CSS. И он будет работать как раз с помощью вот этих ID. И нужно делать уникальные ID каждый раз, да.

Лучше используйте любой удобный JS-плагин для этого (если не хочется самому писать), тогда вам и не потребуются всякие хаки.

Например:
https://fredolss.github.io/rater-js/example/

[art_y10]

Рустам Байназаров, спасибо. Я так понимаю, что id нужен только для блока-контейнера (допустим, карточки товара), внутри которого будут звездочки с рейтингом? Тогда можно к классу добавить id и дальше прописать стили по маске класса?

[Rustam Bainazarov]

art_y10, нет, ID нужны для работы всей этой конструкции, так как это хак на input'ах. Посмотрите внимательнее разметку. Там у каждого элемента свой ID.