css - 行がクリックされたときにテーブルのCSSクラスを無視する(Chrome)

Question

テーブルにTwitter Bootstrap cssを使用しているため、ホバーすると行の背景が変わります

<table id="tableAppList" class="table table-condensed table-hover">
</table>

CSS:

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
   background-color: #f5f5f5;
}

行がクリックされたら、「rowSelected」クラスを追加して背景色を変更します

タイプスクリプト:

$("#tableAppList tr").on("click", (e: JQueryEventObject) => {
                e.preventDefault();                    
                var appName = $(e.currentTarget).find("td").eq(0).find("label").text();
                this.selectedAppRowId = $(e.currentTarget).attr("id");
                $(e.currentTarget).addClass("rowSelected");

                this.getAppUsers(appName);
            });

予想どおり、テーブル css のためにホバーすると、行は「選択された」背景色を失います。

選択した行のテーブル css クラスをオーバーライドまたは無視する方法はありますか?

これまでにこれを試しましたが、うまくいきません：

.rowSelected 
{
   background-color: #606060;
   color: #FFFFFF;
}

.rowSelectedOverrideHover tr:hover > td 
{
   background-color: #606060;
}

おそらく唯一の代替手段は、テーブル ホバー css クラスを使用せず、代わりに jQuery を使用してホバーしたときに行にクラスを追加することです (少し非効率的です)。

そこに他のアイデアはありますか？