更改css后,悬停不起作用

时间:2012-02-17 16:32:08

标签: jquery

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

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

http://jsfiddle.net/hh4NJ/

2 个答案:

答案 0 :(得分:23)

您尚未定义“悬停”的含义,但如果您正在谈论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选择。

答案 1 :(得分: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时,将其设为白色”。