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;
}

也许唯一的选择是不使用table-hover css类，而是在使用jQuery（有点效率低）悬停时向该行添加一个类，如果选择它，我可以选择忽略它。

还有其他想法吗？

Answer 1

确保所选背景的规则使用比悬停选择器高specificity的选择器。例如，这个

tbody tr.rowSelected > td,
tbody tr.rowSelected > th {
   background-color: #606060;
}

具有相同的特异性，因此如果您将其置于悬停规则之后，它将在所有情况下覆盖它。

单击行时忽略表css类（Chrome）

1 个答案: