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

it's normal - see [this documentation](https://developer.mozilla.org/en/docs/Web/CSS/Specificity) to understand why — Jaromanda X, Nov 22 '16 at 05:37
one easy fix is to set `!important` flag on the hover background color — Jaromanda X, Nov 22 '16 at 05:38

score 9 · Accepted Answer · answered Nov 22 '16 at 05:38

9

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

answered Nov 22 '16 at 05:38

priya_singh

2,478
1
14
32

Mr.7 · Answer 2 · 2016-11-22T07:05:47.193

Very interesting though it is weird behaviour.

var elem = document.getElementsByClassName("cls")[0];
elem.style.backgroundColor = "yellow"; // It'll become inline property

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

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

<div class="cls"></div>

When we are applying background-color from Javascript, it'll become inline property and taking high priority over other properties and even overriding background-color from hovereffect.

For a POC, look at this

.cls {
  width: 100px;
  height: 100px;
   background-color: #ff0000; }
.cls:hover { background-color: #0000ff; }

<div class="cls" style="background-color: yellow"></div>

Now, i'm applying background-color from inline and here also it is taking high priority over css styles.

Solution for this cause is, adding !important on hover

var elem = document.getElementsByClassName("cls")[0];
elem.style.backgroundColor = "yellow";

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

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

<div class="cls"></div>

UPDATE

As @Mr_Green said, adding !important property is not best practice, instead we can add one more class will also solves your problem.

var elem = document.getElementsByClassName("cls")[0];
elem.classList.add('secondary');

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

.secondary {
  background-color: #000000;
}

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

<div class="cls"></div>

Hope this helps :)

Yes, it is strange for me because I always thought that pseudo class styles will precede the inline styles. The solution would be not to go with `!important` for pseudo class styles but to add a separate class dynamically which holds the styles. — Mr_Green, Nov 22 '16 at 06:06

score 0 · Answer 3 · answered Nov 22 '16 at 05:39

0

I think it will work that giving class 'cls2' to mydiv in Javascript and

.cls:not(.cls2) { background-color: #ff0000; }
.cls2 { background-color:#555555; }
.cls:hover { background-color: #0000ff; }

answered Nov 22 '16 at 05:39

Luan

95
1
6

score 0 · Answer 4 · answered Nov 22 '16 at 05:44

0

maybe add onmouseenter, onmouseleave event listener to implement the hover.

answered Nov 22 '16 at 05:44

Ben

84
6

score 0 · Answer 5 · edited May 23 '17 at 12:33

0

Changing the background color using javascript will overwrite that element's style.

if you really want to add the hover effect using javascript you can refer to this post: Change :hover CSS properties with JavaScript

I recommend you to use JQuery for these type of codes.

edited May 23 '17 at 12:33

Community

1
1

answered Nov 22 '16 at 06:21

Morteza

1

score 0 · Answer 6 · answered Nov 22 '16 at 06:35

check the snippet . its working

var myDiv = document.querySelectorAll('.cls')[0];
myDiv.style.background='green'

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

   

 <div class="cls">
</div>

Javascript backgroundColor does remove css hover?

6 Answers6