javascript - 使用 css 类切换背景颜色

Question

我有一个元素，其背景颜色默认设置为“lightGreen”，在悬停时，我添加了一个应将 background-color 覆盖为“red”的类。

当类被添加时(确实如此)，它不会应用红色，而是坚持使用浅绿色。

请注意，该元素默认具有“已禁用”类，但在此示例中，我在添加“uiHighlight”之前运行了 .removeClass("disabled") 代码。

为什么它不能按预期工作？

我有这个:

#increaseImpulse, #decreaseImpulse, #undoLastAction {
    border: 1px solid black;
    background-color: lightGreen;
}

.uiHighlight {
    background-color: red;
}

.disabled {
     display: none;
}

还有这个

            <tr id="undoLastAction" class="disabled">
                <td colspan=2>
                    Undo last action
                </td>
            </tr>

还有这个

    $("#undoLastAction")
    .hover(
        function(e){
            $(this).addClass("uiHighlight");
        },
        function(e){
            $(this).removeClass("uiHighlight");
        }
    )
    .click(function(e){
        console.log("undoLastAction")
    });

Answer 1

你真的不需要 jQuery - 这可以用纯 CSS 来完成:

#undoLastAction {
    background-color: green;
}

#undoLastAction:hover {
    background-color: red;        
}

看看这个 jsFiddle .