使用CSS類切換背景色

Question

我有一個元素，其背景顏色默認情況下設置為“ lightGreen”，並且在懸停時，我添加了一個應將background-color覆蓋為“ red”的類。

當添加類（並且確實添加了該類）時，它不應用紅色，而是堅持淺綠色。

請注意，該元素默認情況下具有“ disabled”類，但是在此示例中，我在添加“ 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 。

Answer 2

id選擇器比class選擇器更具特異性-這就是為什么它不起作用。 嘗試這個：

#undoLastAction.uiHighlight {
  background-color: red;
}

干杯!

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

 #increaseImpulse, #decreaseImpulse, #undoLastAction { border: 1px solid black; background-color: lightGreen; } #undoLastAction.uiHighlight { background-color: red; } .disabled { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="undoLastAction"> <td colspan=2> Undo last action </td> </tr> </table>