单击li元素后，删除：hover类

Question

全部

我有一个这样的项目列表

<ul class="known-fields list-unstyled" [hidden]='!showKnownList' style="width: 25%; max-height: 400px">
    <li class="known-field" *ngFor="let knownField of knownFields" (click)="onKnownFieldClicked($event, knownField)">
        <span class="known-field-text" [ngClass]="{ 'required': knownField.required }">
            {{ knownField.label }}
        </span>
    </li>
</ul>

在我的scss中，我有以下内容：

.known-field {
//display: block;
font-size: 12px;
padding: 4px;
background-color: #f3f3f3;
border: 1px solid #ccc;
margin-bottom: 2px;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
text-align: center;

&:hover {
    background-color: #f2fcff;
    border-color: darken(#f2fcff, 15%);
}

.required::after {
    content: '*';
    color: #ff3300;
}

&.active {
    background-color: #f2fffc;
    border-color: darken(#f2fffc, 15%);
}
}

我想做的是，一旦用户单击列表项，就禁用：hover类。

执行此操作的正确方法是什么？

Thx jonpfl