Удаление: hover class после нажатия на элемент li

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