Question

我有一张表：

行和单元格通常没有指定背景;表的背景显示通过。
具有:hover伪类的行具有背景颜色以突出显示它们 - 例如，当鼠标在表格上移动时（在IE7和其他任何现代版本中）跟踪行。
某些细胞需要以不同的背景颜色（以及其他各种样式）突出显示;这些都有自己的课程。

问题是当悬停突出显示行时，我希望特殊单元格不是特殊的;看起来很奇怪。我需要支持IE7（谢天谢地不是6个！）并且自然希望支持Chrome，Firefox，Safari和大多数其他现代浏览器。

以下是相关规则的精简版本：

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

我尝试过的事情：

CSS3中的:not伪类：table.status tr:not(:hover) td.down。适用于Chrome和Firefox，而不适用于IE7。
使用关键字table.status tr:hover td.down重复属性的更具体的规则（例如inherit）。（Blech，脆弱，在将样式添加到另一个规则中时，必须确保将继承样式添加到另一个规则。）再次适用于Chrome和Firefox，而不适用于IE7。

我真的不想做的事情：

设置相关样式的更具体规则，以便它们与表格的样式相匹配。 Blech，比上面的inherit更脆弱。但功能齐全。
使用JavaScript进行悬停效果（尽管这也有支持IE6的优势）。 JavaScript中的Hovers往往比内置的更多开销。

还有其他CSS解决方案吗？

FWIW，这是我的测试页面：

<!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>

Answer 1

由于您在表格上使用了border-collapse，因此您可以通过以下方式实现目标：

table.status tr:hover td
{
    background-color: #FAF0BD;
}

..代替..

table.status tr:hover
{
    background-color: #FAF0BD;
}

我理解你的问题，因为你希望tr：hover规则优先于特殊单元格。在这种情况下，在您的标记中，这些是class="down"的单元格，对吗？由于您使用的是border-collapse，因此<td>的背景颜色会在<tr>内混合在一起。希望这会有所帮助。

Answer 2

我不确定我理解你......但我认为这可行：

table.status td.down, table.status td.down:hover
{
    background-color: #D22;
    color:            white;
}

Answer 3

当您将鼠标悬停在表格行上时，简单地从特殊单元格中删除白色会出现什么问题？（未经测试 - 只有IE6在工作）。

/ *“向下”单元格是特殊的，但是当盘旋时让它们看起来像其他* /

table.status tr:hover td.down
{ 
    background-color: #FAF0BD; 
    color:            black; 
}

如果您拥有完整的doctype，这可能会更有效。例如

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

编辑：没关系 - 没有读完整的问题 - 祝你好运！

如果行没有悬停，我怎样才能将规则应用于单元格？

3 个答案: