为什么使用jQuery的css()方法修改background-color会导致:hover失效？

Question

以下是一个示例：https://jsfiddle.net/6kg43qfr/

代码:

Jquery:

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

翻译:

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

CSS:

#foo:hover{

  background-color: red;

}

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

- Jake Stainer

---

它不会移除:hover。jQuery的css方法会添加内联CSS。这比类或ID更重要，因此:hover被忽略。 - klauskpm

我该如何解决这个问题？ - Jake Stainer

我的问题是：你只是想“绕过这个问题”并编写一些烂代码，还是想要可维护的代码，可以在未来重复使用和改进？ - Alexander Capone

Answer 1

那是因为您在JavaScript代码中设置颜色的方式。 内联样式比应用于类或ID的样式具有更高的优先级。

实际上有许多规则，可以正确地覆盖样式。请快速查看此链接以了解更多信息：http://www.hongkiat.com/blog/css-priority-level/ 我强烈建议您在继续项目之前阅读更多关于CSS的内容，以保持代码整洁和可维护性。

为了满足您的需求，请查看此fiddle：https://jsfiddle.net/6kg43qfr/2/

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

- Alexander Capone

---

我该如何解决这个问题？ - Jake Stainer

@JakeStainer，我刚刚编辑了我的回答，这就是你如果需要 JavaScript 可以做到的方式。 - Alexander Capone

JakeStainer，你不应该跟随@MdMahfuzurRahman建议的代码。这是一个可怕、难以维护的方法的例子。此外，你不应该在这种情况下使用!important。我强烈建议你阅读一些“样式”文献。 - Alexander Capone

addClass()是解决这个问题的好方法，可以重复使用现有的类而不会覆盖它们。 - zoite

@AlexanderCapone 我同意addClass是这里的正确解决方案。谢谢Alex。 - Jake Stainer

Answer 2

最佳解决方案是：

#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');
});

- Md Mahfuzur Rahman

---

有人能解释一下为什么会被踩吗？ - Md Mahfuzur Rahman

我可以解释。 为什么您建议Jake Stainer使用JavaScript代码来应用background-color而不是教他如何做呢？如果我有机会在真实项目中看到这段代码，我将与该人进行严肃的交谈。 - Alexander Capone

由于他正在使用 js 代码来应用背景颜色，我建议他也使用 js 来进行所有更改。您也可以向他建议使用 js。为什么不建议他仅使用 css？ - Md Mahfuzur Rahman

我的解决方案可以放入其他函数的处理程序中，仍然易于维护和补充。 - Alexander Capone

是的，纯CSS部分，在顶部是最好的解决方案，如果只有CSS在这里足够了。 - Alexander Capone

Answer 3

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

- Mr Lister

---

我该如何解决这个问题？ - Jake Stainer

@JakeStainer，请查看Md Mahfuzur Rahman的答案，它是有效的。我不知道谁在给他点踩。 - Mr Lister

@MrLister，是我。我在上面的评论中已经解释了自己。 - Alexander Capone

@AlexanderCapone 对不起，我认为根据提问者的问题，JavaScript 是必要之恶，没有意识到真正的解决方案可能会简单得多。 - Mr Lister