wie das ganze Sternsymbol zu färben, wenn die Schaltfläche geklickt wird

Question

Ich mache ein Projekt in CodeIgniter und ich habe ein Formular, das verwendet wird, um ein Produkt zu bewerten.

Wenn ich auf eine Schaltfläche geklickt (Stern) Ich brauche die ganze Taste (Stern), um seine

Farbe zu ändern in yellow.I dies tat, aber es ändert sich nur die Rahmenfarbe in yellow.Middle

der Schaltfläche bleibt in weiß. kann mir bitte jemand erklären, wie man das macht?

<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 Dieser Code ändert sich die Farbe der Schaltfläche, wenn die Taste

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

CSS Farbe auf Maus Dieser Code Link bewegen die Tasten und Änderung

<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

Sie wenden müssen angeklickt wird der gleiche Stil wie für: Hover Selector. Zum Beispiel können Sie die Klasse .active zum angeklickten Stern hinzufügen. Überprüfen Sie den CSS- und JS-Code unten.

.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'); 
}