css - 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 クラスを無効にすることです。

これを行う適切な方法は何ですか？

ありがとうございます