如何在单击按钮时为整个星形图标上色

Question

我正在codeIgniter中做一个项目，我有一个用于对产品进行评级的表格。

当我点击一个按钮（星号）时，我需要使整个按钮（星号

颜色变为黄色。我这样做了，但它只将边框颜色更改为黄色。中间

按钮的保持白色。有人能告诉我怎么做吗？

<h1><div class="rating" style="width:200px;float:left;padding-left:1px">
                                    <span id="span1" onclick="document.getElementById
('rateText').innerHTML='Excellent', setColor(this.id);">   ?   </span> 
                                    <span id="span2" onclick="document.getElementById
('rateText').innerHTML='Good', setColor(this.id);">   ?   </span> 
                                    <span id="span3" onclick="document.getElementById
('rateText').innerHTML='Okay', setColor(this.id);">   ?   </span>
                                    <span id="span4" onclick="document.getElementById
('rateText').innerHTML='Unsatisfied', setColor(this.id);">   ?   </span>
                                    <span id="span5" onclick="document.getElementById
('rateText').innerHTML='Terrible', setColor(this.id);">   ?   </span>
                                    </div></h1>
<div style="float:right;padding-right:450px">
        <h3><p id="rateText"></p></h3>
</div>

Javascript点击按钮时，此代码会更改按钮颜色

<script type="text/javascript">
function setColor(btn){
    var property = document.getElementById(btn);
    property.style.color = "#FFFF00"
}
</script>

CSS此代码链接按钮并更改鼠标悬停上的颜色

<style type="text/css">
    #rateText{
    text-align:right;
    }
    .rating {
    unicode-bidi: bidi-override;
    direction: rtl ;
    }
    .rating > span:hover:before,
    .rating > span:hover ~ span:before {
    content: "2605";
    position: absolute;
    color: #FFFF00;
    }
</style>

Answer 1

您需要应用与for相同的样式：悬停选择器。例如，您可以将.active类添加到单击的星形中。检查下面的css和js代码。

.rating > span.active:before,
.rating > span:hover:before,
.rating > span:hover ~ span:before
{
    content: "2605";
    position: absolute;
    color: #FFFF00;
}
function setColor(btn){
        var property = document.getElementById(btn);
        property.classList.add('active');
}