<分区>
标签 javascript css
<分区>
我要打分。我不知道如何让以前的元素获得选中元素的样式。
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");
}
这是有效的(从五颗星中挑选一颗并将其颜色更改为金色)但我希望在选定一颗星后面的星星也改变颜色。
我试过将 css 更改为:
.give-rate .selected::before i,
.give-rate .selected i {
color: gold;
}
但这样一来，没有星星变色。
有谁能告诉我应该怎么做吗？
最佳答案
没有像选择器这样的东西可以应用于一个元素，以及所有 previous sibling 姐妹。
您应该使用 JavaScript 将 selected 类应用于悬停的星星，以及之前的星星。
关于javascript - 在元素之前更改元素的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57625035/