jQuery addClass不会覆盖

Question

之前已经回答了很多次，并且所有的回答似乎都指向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不优先于预定义的颜色吗？

感谢。

Answer 1

你的问题

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

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

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

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

Answer 2

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

或

你可以在'color-1 bg-2'类

上使用！important

.bg-2 {display：block！important}

Answer 3

试试这样：

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

由于您的color-2类会影响颜色，因此请将其删除..