Using JS to write CSS will cancel :hover properties defined in stylesheet

Question

I have two divs. One is parent of the other. When I hover over the parent the child gets a different background color and font color. However when I run the function switch() that changes the inline style of the child element the hover propertie is canceled. In other words: after applying CSS with JS the child background doesn't change on hover.

document.querySelector('button').onclick = function() {
  document.querySelector('.foo').style.backgroundColor = 'green';
}

.container {
  background-color: lightgrey;
  margin: auto;
  width: 200px;
  display: flex;
  align-items: center;
  height: 50px;
}
.foo {
  width: 100px;
  margin: auto;
  text-align: center;
}
.container:hover > .foo {
  background-color: #c01919;
  color: yellow;
}

<div class="container">
  <div class="foo">Hey there!</div>
</div>

<button>.foo(backgroundColor) -> green</button>

The real question is how to prevent inline style from canceling CSS :hover properties?

Is there a way to make the background color red on hover after the function has affected the inline style?

I think that no, as inline style property has highest privilige in style inheritance. — kolboc, Aug 14 '16 at 16:18
@NiharSarkar — The OP included a live demo in the question itself. What would be the point in duplicating it on a third party site? — Quentin, Aug 14 '16 at 16:25

score 3 · Accepted Answer · answered Aug 14 '16 at 16:21

The real question is how to prevent inline style from canceling CSS :hover properties?

Short of using !important (which is awful, so don't), you can't. The point of inline style is that it is more specific that any selector.

Stop using inline style. Set the green colour in the stylesheet and then activate it by using JavaScript to change the classes that the element is a member of.

document.querySelector('button').onclick = function() {
  document.querySelector('.foo').classList.add('bar');
}

.container {
  background-color: lightgrey;
  margin: auto;
  width: 200px;
  display: flex;
  align-items: center;
  height: 50px;
}
.foo {
  width: 100px;
  margin: auto;
  text-align: center;
}
.bar {
  background-color: green; 
}
.container:hover > .foo {
  background-color: #c01919;
  color: yellow;
}

<div class="container">
  <div class="foo">Hey there!</div>
</div>

<button>.foo(backgroundColor) -> green</button>

So I shouldn't use: `.....style.color = 'red'` and other JS methods of this kind ? — Ivan, Aug 14 '16 at 16:23
@Ivan — In general they are more trouble than they are worth, in this particular case they don't do what you want. — Quentin, Aug 14 '16 at 16:24

anykey · Answer 2 · 2016-08-14T16:53:37.167

0

Inline style has a higher privilege than styles defined in a stylesheet or in <style> tags unless !important is used in the definition of the rule. Your use case looks like instead of making the button green with inline style, adding a class (maybe is-clicked) would better. Then you would prevent ugly inline style, have a semantic class naming and no problems overwriting that style with css.

document.querySelector('.foo').classList.add('is-clicked');

Note: classList is not supported in (very) old browsers. Depending on the target audience I would say it is OK to use: http://caniuse.com/#search=classlist

edited Aug 14 '16 at 16:53

answered Aug 14 '16 at 16:28

anykey

54
5

There is no `addClass` method an HTML element object. – Quentin Aug 14 '16 at 16:45
1

Damn right! should be document.querySelector('.foo').classList.add('is-clicked'); for the vast majorities of currently used browsers. – anykey Aug 14 '16 at 16:48
@Quentin - I noticed that just after I posted my comment, which is why I tried to delete it quickly. Sorry about that. – rdgd Aug 14 '16 at 16:59

Using JS to write CSS will cancel :hover properties defined in stylesheet

2 Answers2