After changing css via JavaScript hover doesn't work, what should I do?

Question

css

Hello, I have an element like this and there is css
<div id="elem"></div>

#elem{
        height: 100px;
        width: 200px;
        background-color: green;
}
#elem:hover{
        background-color: blue;
}

The next question is: When using JavaScript to change the color of an element, after that hover does not work, and this does not only affect the color. When changing any property through javascript, css does not work correctly. What to do?

Answer 1

If you want :hover to override your own styling, use !important in :hover .
For example:

#elem:hover{
        background-color: blue !important;
}

Answer 2

https://jsfiddle.net/wmhaxrn3/3/