Wie kann ich CSS .hover verwenden, wenn ich die BG-Farbe mit JavaScript ändere?

Question

Ich möchte, dass eine Schaltfläche grau bleibt, wenn keine Schwierigkeit gewählt wurde. Sobald es ausgewählt ist, sollte die Schaltfläche eine andere Farbe haben. Ich möchte, dass die .hover die ganze Zeit auf die Schaltfläche angewendet wird. Dies ist mein aktueller nicht-funktionierenden Code:

<div id="start"> 
<p id="startText" class="text">Find random exercise!</p> 
</div> 
<style> 

#start{/*styling for the button and the text inside as well as .hover*/ 
width: 50%; 
height: 100px; 
background-color: gray; 
position: absolute; 
top: 50%; 
left: 24%; 
} 
#startText{ 
position: absolute; 
top: 15%; 
left: 14%; 
} 
#start:hover{ 
background-color: yellow; 
} 
</style> 

<ul id="difficulty"><!--Here I have a ul with the difficulties to select 
<li id="easy" class="list" onclick="shadows(1)">Easy</li> 
<li id="medium" class="list" onclick="shadows(2)">Medium</li> 
<li id="hard" class="list" onclick="shadows(3)">Hard</li> 
</ul> 

Sobald die Schwierigkeit, angeklickt wird, die Schatten() Funktion ausgeführt wird. Hier ist es:

var start=document.getElementById("start"); 
function shadows(number){ 
start.style.cursor="pointer"; 
start.style.backgroundColor="#ffffb3"; //I change the color of the background 
if(number==1){ 
    chosenDifficulty=.5; 
} 
else if(number==2){ 
    chosenDifficulty=1; 
} 
else{ 
    chosenDifficulty=1.5; 
} 
} 

Wie kann ich die Hintergrundfarbe ändern und den Hover nicht beeinflussen?

Answer 1

#start:hover{ 
background-color: yellow!important; 
} 

Answer 2

Erinnern Sie sich an den Kaskadeneffekt von CSS? Setzen Sie Ihren '#start: hover' nach Ihrer 'start.style.backgroundColor' und der Hover überschreibt vorhandene Farbe, wenn sie ausgelöst wird. Wenn nicht, dann kehrt die ursprüngliche BG-Farbe zurück.