为什么使用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放在元素的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');
});