override html встроенный фоновый цвет с css hover

Question

У меня проблема, мне нужно изменить фоновый цвет таблицы, я могу только изменить css. Я хочу навести курсор на таблицу tr, но некоторые из таблицы td имеют встроенный bg-цвет, и я не могу навести на него курсор. ! важный не работает. Вот моя проблема.

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

Ваш стиль Некорректное, В CSS вы пытаетесь изменить tr фон, а не td.

Заменить CSS этим и она отлично работает, если вы хотите изменить все парения линии в розовом цвете:

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

Заменить CSS этим и она отлично работает, если вы хотите изменить парить td в розовом цвете:

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

Answer 2

Добавление правила тд фиксированной ваша проблема

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>