ボタンをクリックしたときにスターのアイコン全体を色づける方法

Question

私はcodeIgniterでプロジェクトをやっていますが、私は製品を評価するためのフォームを持っています。

私は（スター）ボタンをクリックしたとき、私はyellow.Iにその

色を変更するには、全ボタン（スター）を作成する必要があるがこれをしなかったが、それは唯一のyellow.Middle

に境界線の色を変更しますボタンの

は白色のままです。 誰でも私にそのことを説明していただけますか？

<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を このコードは、マウスのボタンと変更色はあなたが適用する必要が

<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

をホバーボタンがクリックされた

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

CSS このコードリンクをボタンの色を変更しますホバーセレクターと同じスタイルです。たとえば、クリックした星に.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'); 
}