在元素之前更改元素的颜色

Question

我要打分。我不知道如何使先前的元素具有选中元素的样式。

CSS

.give-rate label i {
  color: lightgray;
  cursor: pointer;
}
.give-rate .selected i {
   color: gold;
}

HTML

{% for radio in rating.Rate %}
 {{form_widget(radio)}}
 <label for="{{radio.vars.id}}" id="star-{{radio.vars.value}}" class="required">
   <i class="fas fa-star" id="{{radio.vars.value}}" onclick="pick({{radio.vars.value}})"></i>
 </label>
{% endfor %}

JS

function pick(id) {
 const star = document.getElementById("star-" + id);
 const stars = document.getElementsByClassName("selected");
 while (stars.length > 0) {
  stars[0].classList.remove("selected");
 }

 star.classList.add("selected");
}

这是可行的（从五颗中选出一颗恒星，然后将其颜色更改为金色），但是我希望一颗选定的恒星也能改变颜色。

我尝试将CS​​S更改为：

.give-rate .selected::before i,
.give-rate .selected i {
  color: gold;
}

但是这种方式没有星星在改变颜色。

有人可以告诉我该怎么做吗？

Answer 1

没有像选择器那样适用于元素以及所有以前的兄弟姐妹的东西。

您应该使用JavaScript将selected类应用于悬停的恒星以及之前的恒星。