CODEWITHSUNDEEP
csscolorshoverrowcss-tables
user3005684
user3005684

Reputation:

How can I set the background-color of every other row of a table AND highlight row on hover?

I'm trying to make a table that has a different background color for every other row, and highlight the row on hover. They both work perfectly separated but when you put them together the highlight on hover doesn't work. Here is my CSS. I might have to do it by using Javascript to do one of the functions...

.tableData tr:hover {
background-color: #ffff99;
}

.tableData tr:nth-child(even) { /*(even) or (2n 0)*/
background: #f1f1f1;
}
.tableData tr:nth-child(odd) { /*(odd) or (2n 1)*/
background: #FFF;
}

Upvotes: 0

Views: 1104

Answers (1)

Sven Tschui
Sven Tschui

Reputation: 1425

Try to have the :hover selector after the others:

.tableData tr:nth-child(even) { /*(even) or (2n 0)*/
background: #f1f1f1;
}
.tableData tr:nth-child(odd) { /*(odd) or (2n 1)*/
background: #FFF;
}

.tableData tr:hover {
background-color: #ffff99;
}

Upvotes: 1

Related Questions