Как удалить стиль css из меток набора полей, когда пользователь впервые наведен на метки?

У меня есть следующая скрипка для моего селектора звездного рейтинга fieldset:

https://jsfiddle.net/bxd107gv/

По умолчанию он рассчитан на 5 звезд, но затем пользователь может щелкнуть одну, чтобы изменить выбор на меньшее значение, если это необходимо, но; Думаю, стиль:

.rating > label{
    color:#FFD700;
}

Мешает, применяя это, поэтому я попытался выполнить событие наведения курсора в JS, чтобы вернуть звезду цвет по умолчанию, но это имеет ту же проблему, но с другим цветом; как мне изменить это так, чтобы только выбранные звезды были выделены желтым, а остальные стали серыми после того, как пользователь изменил значение с 5 на любое другое?


javascript css styles rating
person Community    schedule 21.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить класс к контейнеру, чтобы отметить статус с рейтингом при рейтинге, и добавить дополнительный рейтинг CSS к метке в контейнере с рейтингом:

  1. Добавьте следующий javascript в функцию setRating, которая обрабатывает логику рейтинга.
document.getElementById('starRatingSelection').classList.add('rated');
  1. Добавьте следующий css в конец файла css
.rated > label{
  color: #a5a5a5;
}
person Chanvin    schedule 21.05.2020
comment
Игнорируйте этот последний комментарий - теперь это вроде работает, но как только вы измените, скажем, 5 звезд по умолчанию на 3 звезды, если они затем попытаются перейти на 2 звезды, это не сработает. - person ; 21.05.2020
comment
@Lombard Вы можете попробовать установить один и тот же атрибут name для всех элементов ввода радио, например name="rating" - person Chanvin; 21.05.2020
comment
Да, конечно, я такой идиот, что упустил это! Решение работает отлично, это был мой недостаток предусмотрительности. - person ; 21.05.2020
comment
@Lombard Lol, все в порядке, небрежность - обычное дело. - person Chanvin; 21.05.2020