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
– kolboc, Commented Aug 14, 2016 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
– Quentin, Commented Aug 14, 2016 at 16:25

Quentin · Accepted Answer · 2016-08-14 16:21:43Z

3

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>

answered Aug 14, 2016 at 16:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan Over a year ago

So I shouldn't use: .....style.color = 'red' and other JS methods of this kind ?

Quentin Over a year ago

@Ivan — In general they are more trouble than they are worth, in this particular case they don't do what you want.

anykey · Accepted Answer · 2016-08-14 16:53:37Z

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, 2016 at 16:53

answered Aug 14, 2016 at 16:28

anykey

545 bronze badges

3 Comments

Quentin Over a year ago

There is no addClass method an HTML element object.

anykey Over a year ago

Damn right! should be document.querySelector('.foo').classList.add('is-clicked'); for the vast majorities of currently used browsers.

rdgd Over a year ago

@Quentin - I noticed that just after I posted my comment, which is why I tried to delete it quickly. Sorry about that.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related