使用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。