Ignore table css class when row is clicked (Chrome)

Question

I'm using Twitter Bootstrap css for the table so the row background changes when hovered over

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

When the row is clicked I add the "rowSelected" class to change the background colour

Typescript:

$("#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);
            });

As expected the row loses it's "selected" background color when hovered over because of the table css.

So is there a way to override or ignore the table css class for the selected row?

Have tried this so far but doesn't work:

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

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

Perhaps the only alternative is to not use the table-hover css class and instead add a class to the row when hovered using jQuery (a bit inefficient) which I can opt to ignore if it is selected.

Any other ideas out there?

RoToRa RoToRa · Accepted Answer · 2013-05-17T13:27:52

Make sure your rule for your selected background uses a selector with a higher specificity than the selector for the hover. For example, this

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

has same specificity, so if you put it after the rule for the hover it will override it in all cases.

Ignore table css class when row is clicked (Chrome)

1 Answers