Why does using jquery css background.color remove :hover?

Question

Here is an example: https://jsfiddle.net/6kg43qfr/

Code:

Jquery:

$('#foo').css('background-color', '#f8f7f7');

Html:

<div id="foo">
test
</div>

CSS:

#foo:hover{

  background-color: red;

}

Question: Why doesn't the hover work?

It does not remove :hover. jQuery css method adds inline css. This is more important than class or ID, so :hover is ignored. — klauskpm
– klauskpm, Commented Apr 4, 2016 at 19:22
My question here is: Do you simply want to 'get around this' and write some piece of shit-ass code or you want to have a maintainable code, that can be reused and improved in future? — Alexander Capone
– Alexander Capone, Commented Apr 4, 2016 at 19:31

Alexander Capone · Accepted Answer · 2016-04-04 19:25:54Z

3

That is because how you set the color in your javascript code. Inline styles has more priority then styles applied to classes or id's

There are actually many rules, of how to properly override styles. Please take a quick look at this http://www.hongkiat.com/blog/css-priority-level/

I strongly suggest you to read more about css before proceeding with the project, in order to keep code clean and maintainable.

in order to fullfill your needs, take a look at this fiddle: https://jsfiddle.net/6kg43qfr/2/

$('#foo').addClass("green-background")

edited Apr 4, 2016 at 19:25

answered Apr 4, 2016 at 19:22

Alexander Capone

5583 silver badges18 bronze badges

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

5 Comments

Jake Stainer Over a year ago

How do I get around this?

Alexander Capone Over a year ago

@JakeStainer, I just edited my answer, this is how you CAN do this, if you need javascript.

Alexander Capone Over a year ago

JakeStainer, You should NOT follow the code, @MdMahfuzurRahman suggested. This is example of awfull, unmaintainable approach. Also you should NOT use !important for this case. I strongly advice you to read some 'styling' literature.

zoite Over a year ago

addClass() is a good solution to this issue, re-uses existing classes without overriding.

Jake Stainer Over a year ago

@AlexanderCapone I agree that addClass is the CORRECT solution here. Thanks Alex.

Mr Lister · Accepted Answer · 2016-04-04 19:22:21Z

2

Because the $('#foo').css() function puts the style in a style attribute on the element, which therefore overrides the stylesheet.

answered Apr 4, 2016 at 19:22

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

4 Comments

Jake Stainer Over a year ago

How do I get around this?

Mr Lister Over a year ago

@JakeStainer See Md Mahfuzur Rahman's answer, which works. And I don't know who's downvoting him.

Alexander Capone Over a year ago

@MrLister, it was me. I did explain myself in the comment above.

Mr Lister Over a year ago

@AlexanderCapone My apologies. I assumed from the OP's question that the JavaScript was a necessary evil and didn't realise that the real solution could be much simpler.

Md Mahfuzur Rahman · Accepted Answer · 2016-04-04 19:42:21Z

2

The best solution is:

#foo:hover{  
  background-color: red;  
}

#foo {
  background-color: #f8f7f7;
}

Or

You also can use this:

$('#foo').css('background-color', '#f8f7f7').hover(
function(){
    $(this).css('background-color','red');
},
function(){
    $(this).css('background-color','#f8f7f7');
});

edited Apr 4, 2016 at 19:42

answered Apr 4, 2016 at 19:24

Md Mahfuzur Rahman

2,3693 gold badges20 silver badges29 bronze badges

5 Comments

Md Mahfuzur Rahman Over a year ago

Can anyone explain the reason of downvoting ?

Alexander Capone Over a year ago

I can explain. Why do you suggest Jake Stainer to use javascript code to apply background-color instead of teaching him how to do it? If I would have a chance to see this piece of code in real project, I would have a serious conversation with that person.

Md Mahfuzur Rahman Over a year ago

As he is using js code to apply background-color, I also suggest him to do all changes using js. You also suggest him js. Why didn't suggest him to use css only ?

Alexander Capone Over a year ago

My solution can be put into some other function's handlers, and still left maintainable and easily replenishable.

Alexander Capone Over a year ago

yes, the pure css part, on top is the best solution, if only css here is enough.

Collectives™ on Stack Overflow

Why does using jquery css background.color remove :hover?

3 Answers 3

5 Comments

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related