使用css类切换背景颜色

时间:2016-11-09 17:12:00

标签: javascript jquery html css css-selectors

我有一个默认情况下背景颜色设置为“lightGreen”的元素,并且在悬停时,我添加一个应该将public static void GetUserGUIDandSID(string username, Object b, Object c) { PrincipalContext ctx = new PrincipalContext(ContextType.Domain, "domainName.com"); UserPrincipal user = (UserPrincipal.FindByIdentity(ctx, username)); var empIdNum = user.Guid.Value; var empSID = user.Sid.Value; List<object> types = new List<object>(); types.Add(b.GetType()); types.Add(c.GetType()); foreach(var key in types) { if (key.GetType() == typeof(Label)) { ((Label)b).FontSize = 10; ((Label)b).Content = empIdNum; } if (key.GetType() == typeof(TextBox)) { ((TextBox)b).FontSize = 10; ((TextBox)b).Text = empIdNum.ToString(); } if (key.GetType() == typeof(TextBlock)) { ((TextBlock)b).FontSize = 10; ((TextBlock)b).Text = empIdNum.ToString(); } } } 覆盖为“红色”的类。

当课程被添加(并且确实如此)时,它不应用红色,但坚持使用lightGreen。

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

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

我有这个:

background-color

和这个

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

2 个答案:

答案 0 :(得分:4)

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

#undoLastAction {
    background-color: green;
}

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

查看此jsFiddle

答案 1 :(得分: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>