使用CSS類切換背景顏色

Question

我有一個元素，其背景顏色默認設置爲「lightGreen」並懸停時，即時添加一個類應該覆蓋background-color爲「紅色」。

當課堂被添加（和它），它不應用紅色，但堅持lightGreen。

請注意，該元素默認具有「禁用」類，但在此示例中，我的代碼在添加「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

的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>

Answer 2

你並不真的需要jQuery的 - 這可以在純CSS來實現：

#undoLastAction { 
    background-color: green; 
} 

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

看看這個jsFiddle。