用css懸停覆蓋html內聯background-color

Question

我有一個問題，我需要更改表格的背景顏色，我只能更改CSS。 我希望將鼠標懸停在表tr上，但某些表td帶有內聯bg顏色，我無法將鼠標懸停在它上面。 ！important不起作用。 這是我的問題。

CSS

 table{ border: 1px solid black; } table tr:hover{ background-color: pink !important; } 

 HTML <table> <tr> <td style="background-color:green;">test1</td> <td>test2</td> </tr> <tr> <td>test3</td> <td>test4</td> </tr> </table> 

Answer 1

為TD添加規則解決了您的問題

table tr:hover td

 table{ border: 1px solid black; } table tr:hover, table tr:hover td { background-color: pink !important; } 

 <table> <tr> <td style="background-color:green;">test1</td> <td>test2</td> </tr> <tr> <td>test3</td> <td>test4</td> </tr> </table> 

Answer 2

您的樣式不正確，請在CSS中嘗試更改tr背景，而不是td 。

以此替換css，如果您想將所有懸停線更改為粉紅色，效果很好：

table tr:hover td{
    background-color: pink !important;
}

以此替換css，如果您想將粉紅色的懸停td更改為粉色，則可以正常工作：

table td:hover{
    background-color: pink !important;
}