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

Question

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

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

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

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

Where and what is the "start"-element in this scenario? Do you wish to style that or the list-elements? — Erik Engervall, Jul 05 '16 at 23:55
as you are applying css as inline, it overtakes precedence. you need to increase the precedence you can use !important to css, it should work. — user669789, Jul 06 '16 at 00:01
Define a CSS class with your cursor and background then add the class rather than setting the inline style — JonSG, Jul 06 '16 at 00:11

score 1 · Accepted Answer · answered Jul 06 '16 at 00:04

1

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

answered Jul 06 '16 at 00:04

user669789

554
4
10
23

5

`!important` is a lazy approach to any CSS problem – Jonathan Jul 06 '16 at 00:05
For reference, see [Implications of Using “!important”](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css). – showdev Jul 06 '16 at 00:12
*any* CSS problem? I feel that is an overstatement. "!important" is a tool like in-line styles and id based selectors. Tools may be abused and used incorrectly but also serve a purpose. – JonSG Jul 06 '16 at 00:21
For all intents and purposes it is better the layman learn *NO JUST NO* when it comes to this technique. You don't want them coming on your team regurgitating what you've just said when rationalising some horrendous hack they've just made. There's a time and a place for everything of course... but not in the arena of learning and finding the most elegant way – Jonathan Jul 06 '16 at 00:28
I see you marked this the "correct" answer. While @Jonathan and I might disagree (slightly) on exactly how much !important should be avoided, I think we both do agree that it is not the right solution to this issue. – JonSG Jul 06 '16 at 00:56

score 0 · Answer 2 · answered Jul 05 '16 at 23:59

Remember the cascade effect of css? Put your '#start:hover' after your 'start.style.backgroundColor' and the hover will override existing color when triggered. If not hover then the original BG color returns.

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

2 Answers2