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...
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; }
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 :)
!important for pseudo class styles but to add a separate class dynamically which holds the styles.
classList is not supported by IE9 and olderI 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; }
maybe add onmouseenter, onmouseleave event listener to implement the hover.
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.
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>
!importantflag on the hover background color