2

我正在为表格使用 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 悬停时向行添加一个类（效率有点低），如果选择它，我可以选择忽略它。

还有其他想法吗？

4

1 回答 1

0

确保所选背景的规则使用比悬停选择器具有更高特异性的选择器。例如，这个

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

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

于 2013-05-17T13:27:52.193 回答