如何創建2個循環的CSS

Question

<table class="samplelinktable" > 
    <tr> 
     <td><a href="samplelink1">samplelink1</a></td> 
     <td><a href="samplelink2">samplelink2</a></td> 
    </tr> 
</table> 

我想用2個循環創建一個Css。

.samplelinktable td:hover { 
    background-color: blue; 
    font-size: 10px; 
    font-family:arial; 
    color:#FFFFF; 
    a:hover { 
     color: #000000; 
    } 
} 

1）當人懸停通過在單元格的背景變藍和表格中的單元中的超鏈接的文本默認爲藍色變成黑色

2）當人懸停在單元格中超鏈接文本的黑色文本自動變爲白色。

請幫我在html中獲取2個顏色變化。

Answer 1

嘗試這種情況：

td{padding:20px;} 
.samplelinktable td:hover { 
    background-color: blue; 
    font-size: 10px; 
    font-family:arial; 
    color:#FFFFFF; 
} 
.samplelinktable td:hover > a { 
    color: #000000; 
} 

.samplelinktable td a:hover { 
    color: #fff ; 
} 

TD填充加入用於可視化目的

Answer 2

，對於第二a色唯一重要的事件是在錨懸停事件：

.samplelinktable td a:hover { 
    color: #000; 
} 

嵌套CSS指令不支持，所以從TD刪除樣式：懸停：

.samplelinktable td:hover { 
    background-color: blue; 
    font-size: 10px; 
    font-family:arial; 
    color:#FFFFF; 
} 
.samplelinktable td a:hover { 
    color: #000; 
}