Question

我有一个默认情况下背景颜色设置为“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>

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>

使用css类切换背景颜色

2 个答案: