Javascript backgroundColor does remove css hover?

Question

My div has class:

.cls { background-color: #ff0000; }
.cls:hover { background-color: #0000ff; }

When with javascript I do:

mydiv.style.backgroundColor = "#555555";

It works but the hover doesn't work anymore!

I haven't found much information about this behavior on the net, is it normal?

How to fix could be another question but if you want to tell...

Answer 1

As you are giving background-color from javascript so it is applied as inline style and if you want to give hover effect then apply !important to it.

.cls { background-color: #ff0000; }
.cls:hover { background-color: #0000ff !important; }