I have a table where:
- The rows and cells normally have no background specified; the table's background shows through.
- Rows with the
:hoverpseudo-class have a background color to highlight them -- e.g., to track rows as the mouse moves over the table (in IE7 and anything else modern). - Some cells need to be highlighted with a different background color (and various other styles); these have their own class.
The problem is that I want the special cells not to be special when the row is being highlighted by the hover; it looks really strange. I need to support IE7 (thankfully not 6!) and naturally want to support Chrome, Firefox, Safari, and most other modern browsers.
Here are trimmed-down versions of the relevant rules:
table.status
{
border-collapse: collapse;
background-color: #CDD8ED;
}
table.status tr:hover
{
background-color: #FAF0BD;
}
/* "down" cells are special */
table.status td.down
{
background-color: #D22;
color: white;
}
Things I've tried:
- The
:notpseudo-class from CSS3:table.status tr:not(:hover) td.down. Works in Chrome and Firefox, not in IE7. - A more-specific rule (e.g.,
table.status tr:hover td.down) that reiterates the properties using the keywordinherit. (Blech, fragile, have to be sure when adding styles to the one rule that you add inherit styles to the other rule.) Again works in Chrome and Firefox, not in IE7.
Things I'd really rather not do:
- A more-specific rule setting the relevant styles so they match the styles of the table. Blech, even more fragile than the
inheritthing above. But functional. - Use JavaScript for the hover effect (although that would have the advantage of supporting IE6 as well). Hovers in JavaScript tend to have more overhead than built-in ones.
Is there another CSS solution?
FWIW, here's my test page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Hover Test Page</title>
<style type='text/css'>
body
{
font-family: sans-serif;
}
table.status
{
border-collapse: collapse;
background-color: #CDD8ED;
}
table.status th
{
text-align: left;
background-color: #14429E;
color: #FEFEFE;
}
table.status td, table.status th
{
padding: 2px 0.5em;
}
table.status tr:hover
{
background-color: #FAF0BD;
}
/*table.status tr:not(:hover) td.down*/
table.status td.down
{
background-color: #D22;
color: white;
font-weight: bold;
}
/*table.status tr:hover td.down
{
background-color: inherit;
color: inherit;
font-weight: inherit;
}*/
</style>
</head>
<body>
<table class='status'>
<thead>
<tr>
<th>Server</th>
<th>Details</th>
<th>www</th>
<th>mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Server1</td>
<td>blah blah blah</td>
<td class='up'>Up</td>
<td class='up'>Up</td>
</tr>
<tr>
<td>Server2</td>
<td>blah blah blah</td>
<td class='up'>Up</td>
<td class='down'>Down</td>
</tr>
<tr>
<td>Server3</td>
<td>blah blah blah</td>
<td class='sched'>Down (scheduled)</td>
<td class='sched'>Down (scheduled)</td>
</tr>
<tr>
<td>Server4</td>
<td>blah blah blah</td>
<td class='up'>Up</td>
<td class='up'>Up</td>
</tr>
</tbody>
</table>
</body>
</html>