更改css后，悬停不起作用

Question

运行此操作后：$('.bar').css({'color':'#fff'});悬停.bar停止工作。为什么呢？

另外，$('.bar:hover').css({'color':'#fff'});也不会改变悬停的颜色，为什么？我错过了什么？

http://jsfiddle.net/hh4NJ/

Answer 1

您尚未定义“悬停”的含义，但如果您正在谈论CSS :hover，那么这是因为内联样式（由.css()设置覆盖样式表样式。） p>

您可以将!important添加到CSS定义中以覆盖内联。

.bar:hover {
    color: #ABCDEF !important;
}

我不相信这适用于旧的IE浏览器。

DEMO： http://jsfiddle.net/hh4NJ/1/

---

另一个（可以说是更好的）解决方案是使用.addClass()代替.css()来改变样式。然后你可以在你的CSS 中处理所有这些（除了添加/删除课程）。

$('.bar').addClass('whiteColor');

.whiteColor {
    color:#fff;
}

DEMO： http://jsfiddle.net/hh4NJ/2/

---

关于您的更新，您不能使用:hover等伪选择器进行DOM选择。

Answer 2

在cascade中，style属性中的规则将超过使用选择器应用的规则。

jQuery css方法修改了style属性。

保持CSS和JS分开。使用JS编辑HTML中的添加和删除类，并使用类选择器应用CSS。 （确保:hover规则仍然有specific个足够的选择器。

作为快速脏解决方案，您还可以制定:hover规则!important，但you shouldn't。

  

另外，$('.bar:hover').css({'color':'#fff'});也不会改变悬停的颜色，为什么？

jQuery的选择器引擎匹配元素，它不会修改样式表。如果这得到支持那么你会说“在这段代码执行时，将.bar指向白色”而不是“当我指向.bar时，将其设为白色”。