更改CSS后，悬停不起作用

运行后：$('.bar').css({'color':'#fff'});悬停for .bar停止工作。为什么？更改CSS后，悬停不起作用

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

可能是因为悬停状态是一个伪类，所以当您更改'.bar'的值时，它也会将其更改为'.bar：hover'。 – 2012-02-17 16:34:58

'$（'。bar：hover'）'不是一个标准的jQuery选择器，是由一个插件实现的吗？ – 2012-02-17 16:36:14

您是否尝试过... css（“color”，“#fff”）而不是使用pair值？如果你使用pair值可能会改变整个css，同时如果你只是以非pair-value的方式来做，你只需要改变那个css值。 – elvenbyte 2012-02-17 16:57:12

您还没有定义你所说的“悬停”的意思，但如果你在谈论CSS :hover，则是因为内嵌样式（如.css()覆盖样式表的样式设置。

您可以添加!important你的CSS定义来覆盖内联。

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

我不相信这一点也适用，虽然旧的IE浏览器。

另一个（而且可能更好）的解决办法是使用.addClass()而不是.css()转变作风。然后你可以在你的CSS （除了添加/删除课程的课程）。

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

.whiteColor { 
    color:#fff; 
}

关于你提到的更新，您不能使用伪选择像:hover对DOM的选择。

2012-02-17 16:35:09

但为什么jQuery会覆盖悬停事件？我了解内联对外部的优先级，但只有在样式冲突时才适用。 – Yamcha 2013-07-03 03:44:47

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

jQuery css方法修改样式属性。

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

作为一个快速和肮脏解决，你也可以让你:hover规则!important，但you shouldn't。

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

jQuery的选择器引擎匹配元素，它不会修改样式表。如果支持，那么你会说：“在执行代码时，使.bar指向白色”而不是“当我指向.bar时，使它变成白色”。

2012-02-17 16:35:28 Quentin

回答