添加懸停顏色以特定的行

Question

如果我針對一個特定的行，說在一個表中的第一個，並希望改變字體顏色，我能做到這一點

.mytable tr:first th { 
    color: red 
} 

但我怎麼添加一個懸停屬性到同一行？這不會起作用，會嗎？

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

Answer 1

你能把第一行放在一個容器中嗎？

.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但會排除< IE8的兼容性。

Answer 4

如何：

.hoverstate：懸停{ 顏色：綠色; }

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

？