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文件中定义它，或者用一个更具体的选择器来定义它，您也可以使用！重要，但是您可能会在以后遇到这样的情况！重要的还不够好，所以我现在要避免它。

Answer 2

这不会被覆盖，因为在“flex-item color-2”之前定义的“color-1 bg-2”类。在css中排序类。

或

你可以使用！重要的‘颜色-1 bg-2’类。

.bg-2{显示:阻止！重要}

Answer 3

就像这样：

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

因为您的color-2类会影响颜色，所以只需删除它。