运行此操作后:$('.bar').css({'color':'#fff'});
悬停.bar停止工作。为什么呢?
另外,$('.bar:hover').css({'color':'#fff'});
也不会改变悬停的颜色,为什么?我错过了什么?
答案 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时,将其设为白色”。