Nick Solonko Nick Solonko - 3 months ago 6x
CSS Question

How can I use CSS .hover if I change the BG color using JavaScript?

I want a button to stay gray if a difficulty was not chosen. Once it is chosen, the button should become a different color. I want a the .hover to apply to the button all the time. This is my current non-working code:

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

#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%;
position: absolute;
top: 15%;
left: 14%;
background-color: yellow;

<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>

Once the difficulty is clicked, the shadows() function runs. Here it is:

var start=document.getElementById("start");
function shadows(number){"pointer";"#ffffb3"; //I change the color of the background
else if(number==2){

How can I change the background color and not affect the hover?

 background-color: yellow!important;