Why use 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 does the freeze not work?

Answer 1

This is because you set the color in your javascript code. Inline styles take precedence over styles applied to classes or id

In fact, there are many rules on how to properly redefine styles. Please take a look at this http://www.hongkiat.com/blog/css-priority-level/

I highly recommend that you learn more about css before embarking on a project so that the code is clean and maintainable.

to fully satisfy your needs, take a look at this fiddle: https://jsfiddle.net/6kg43qfr/2/

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

Answer 2

Since the function $('#foo').css() places the style in the style attribute in the element, which is why it overrides the stylesheet.

Answer 3

The best decision:

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

or

You can also use this:

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