Question

我目前正在尝试根据值更改标签的背景颜色。同时，如果用户点击它或将鼠标悬停在标签上，我想更改标签的颜色。目前，我已完成点击和悬停（使用单独的CSS类），但我不确定如何使值部分也能正常工作。

我在TypeScript文件中将一个简单的布尔值（称为“displayValueTrueClass”）设置为true。如果该值为true，那么我想将CSS类更改为'valueTrue'类。

这是我的HTML：

<section class="ac-container">
<div>
    <input id="id-1" name="id-1" type="checkbox" />
    <label [ngClass]="{'valueTrue': displayValueTrueClass}" for="id-1">Panel Name Goes Here</label>
</div>

这是我的CSS：

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
}

.valueTrue {
    background-color: #060bf7;
    color: #ffffff;
}

.ac-container label {
    padding: 4px 20px;
    position: relative;
    display: block;
    height: 25px; 
    cursor: pointer;
    color: #ffffff;
    font-size: 12px;
    background: #404040;
}

.ac-container label:hover {
    background-color: #000000;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background-color: #4ed017;
    color: #ffffff;
}

.ac-container label-broken {
    background-color: #ff0000;
    color: #ffffff;
}

我的打字稿将布尔值设置为true：

displayValueTrueClass: boolean = true;

我可以确认ngClass行确实使用适当的CSS类显示，但只有当我删除所有其他.ac-container：标签类时，所以看起来这些可能优先于{{1} }类？我很擅长用CSS构建HTML。我很确定我正确使用'ngClass'所以我不确定为什么在该值为true时不应用适当的类。

Answer 1

如您所述，CSS选择器.ac-container label的优先级高于.trueValue选择器。您可以为.trueValue选择器提供更高的优先级：

.ac-container label.trueValue

应用trueValue类时，它将覆盖默认标签选择器。

有关CSS特异性的更多详细信息，请参阅this article。

根据鼠标事件和/或布尔值更改标签颜色

1 个答案: