为什么使用jquery css background.color remove：hover？

Question

这是一个例子： https://jsfiddle.net/6kg43qfr/

代码：

Jquery的：

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

HTML

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

CSS：

#foo:hover{

  background-color: red;

}

问题：为什么悬停不起作用？

Answer 1

这是因为您在javascript代码中设置颜色的方式。 内联样式优先于应用于类或id

的样式

实际上有很多关于如何正确覆盖样式的规则。请快速查看此http://www.hongkiat.com/blog/css-priority-level/

我强烈建议您在继续项目之前阅读有关css的更多信息，以保持代码清洁和可维护。

为了满足您的需求，请看一下这个小提琴： https://jsfiddle.net/6kg43qfr/2/

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

Answer 2

因为$('#foo').css()函数将样式放在元素的style属性中，因此会覆盖样式表。

Answer 3

最佳解决方案是：

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

#foo {
  background-color: #f8f7f7;
}

或者

你也可以使用它：

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