Question

如果我定位一个特定的行，比如表中的第一行，并想要更改字体颜色，我可以这样做

.mytable tr:first th {
  color: red
}

但是如何将hover属性添加到同一行？这不行，是吗？

.mytable tr:first:hover th {
  color: green
}

Answer 1

你能把第一行放在thead容器中吗？

.mytable thead:hover {
     color: green
}

<table class="mytable">
    <thead>
        <tr><th>hello</th></tr>
    </thead>
    <tr><td>goodby</td></tr>
</table>

Answer 2

怎么样？

.mytable tr:first th:hover {
  color: green
}

Answer 3

您当然使用first-child而不只是first？然后将悬停应用于first-child。您无需指定th，因为它无论如何都会传播。

选中 DEMO

.mytable tr:first-child { color: red; } 
.mytable tr:first-child:hover { color: green; } 
.mytable tr { color:blue; }

但是，如果您要指定除first-child以外的任何行，您可能需要查看一些javascript，或者使用nth-child，但这样可以排除＆lt; IE8兼容性。

Answer 4

这个怎么样：

.hoverstate：hover { 颜色：绿色; }

使用这样的HTML：

<table>
    <tr><td>1</td><td>2</td></tr>
    <tr class="hoverstate"><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>

将悬停颜色添加到特定行

4 个答案: