更改css后,悬停不起作用

Question

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

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

http://jsfiddle.net/hh4NJ/

Answer 1

你没有用"悬停"来定义你的意思,但是如果你在谈论CSS :hover,那么这是因为内联样式(由.css()覆盖样式表样式设置).

您可以添加!important到CSS定义以覆盖内联.

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

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

演示: http ://jsfiddle.net/hh4NJ/1/

另一种(可以说是更好的)解决方案是使用.addClass()而不是.css()改变风格.然后你可以在你的CSS中处理所有这些(除了添加/删除课程).

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

.whiteColor {
    color:#fff;
}

演示: http ://jsfiddle.net/hh4NJ/2/

关于您的更新,您不能使用像:hoverDOM选择那样的伪选择器.