2

这个问题之前已经回答过好几次了，所有的回答似乎都指向了 CSS 的特殊性，但据我所知，这里的情况似乎并非如此。

HTML

<button class="flex-item color-2">A</button>
<button class="flex-item color-2">B</button>
<button class="flex-item color-2">C</button>

JS

$("button.color-2").hover( function(){
    $(this).addClass("color-1 bg-2");
}, function(){
    //$(this).removeClass("color-1").removeClass("bg-2");
});

开发者工具输出

在此处输入图像描述

我确实将背景更改为一个类，因为我意识到我在其他地方指定了背景。

现在，当 javascript 添加类时，背景会覆盖，但颜色不会。

addClass 不优先于预定义的颜色吗？

谢谢。

4

3 回答 3

3

你的问题

“addClass 不优先于预定义的颜色吗？”

据我所知，Jquery addClass 与优先级无关。您的 css 的优先级在您的 css 中定义。

例如，颜色 2 优先，因为它在第 216 行，而您的 #fff 在第 215 行

如果您希望添加的类优先，那么您需要在 css 中更好地定义它。要么稍后在 css 文件中定义它，要么使用更具体的选择器定义它，你也可以使用 !important 但你可能会在以后遇到 !important 不够好的情况，所以我现在会避免它

于 2013-07-25T20:16:09.383 回答
2

这不会覆盖，因为在'flex-item color-2'之前定义的'color-1 bg-2'类..在你的css中订购你的类。

或者

您可以在“color-1 bg-2”类上使用 !important

.bg-2{显示：块！重要}

于 2013-07-25T19:59:45.910 回答
1

试试这样：

$(this).addClass("color-1 bg-2").removeClass("color-2");

因为您的color-2课程会影响颜色，所以只需将其删除..

于 2013-07-25T19:56:03.327 回答