jQuery .toggleClass 不切换 CSS 类

Question

.highlight 类在 #button 上切换时不工作。我做错了什么？

HTML:

<form>
    <input id="button" type="submit" value="Click Me">
</form>

CSS:

#button {
    background-color: #AABF1A;
}

.highlight {
    background-color: #555BBB;
}

jQuery:

$(document).ready(function () {
    $("#button").click(function() {
        $(this).toggleClass("highlight");
    });
});

Answer 1

您的 jQuery 代码正在运行。问题是您的 .highlight 类没有足够高的特异性来覆盖 #button 选择器放置在元素上的样式。尝试将您的 CSS 更改为:

#button.highlight {
    background-color: #555BBB;
}