CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Raymond Herring
Raymond Herring

Reputation: 347

Bootstrap 3 Alternative hover colour for specific row

I have a class called 'table-green-hover' which when set on a table makes it so that the hover colour is LightGreen instead of the usual bootstrap colour

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

However for 2 specific rows in my table (with a class of 'logout-hover') I want those to be a completely different colour, I thought of doing it as

.logout-hover > tr:hover > td { background-color: LightBlue; }

Though it doesn't seem to be doing anything at all, when I hover over those 2 specific rows they still show with the LightGreen.

Upvotes: 0

Views: 208

Answers (1)

AVAVT
AVAVT

Reputation: 7133

Edit based on OP's comment:

.table-green-hover tr.logout-hover:hover > td { background-color: LightBlue; }

Old answer:

.logout-hover > tbody > tr:hover > td { background-color: LightBlue; }

The reason is because .table-green-hover > tbody > tr:hover > th (1 class, 3 elements) is more specific than .logout-hover > tr:hover > td (1 class, 2 elements), and thus got higher priority.

Upvotes: 1

Related Questions