Переопределить td bgcolor = "# xxxxxx" с помощью CSS Hover?

Question

Извините мое невежество CSS здесь.

Я пытаюсь применить цвет фона для строки, используя следующий CSS:

tbody tr:hover { 
    background-color: #F69; 
    border: thin solid black; 
} 

таблица HTML имеет некоторые присущие цвета столбцов, как показано ниже. CSS выше не изменит цвет на #F69 и сохранит цвета #993300. Есть ли способ переопределить эту окраску ячеек HTML?

tbody tr:hover { 
 
    background-color: #F69; 
 
    border: thin solid black; 
 
}

<table> 
 
    <tr> 
 
    <th>11 lbs</th> 
 
    <td></td> 
 
    <td bgcolor="#993300">1</td> 
 
    <td bgcolor="#993300">2</td> 
 
    <td bgcolor="#993300">3</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>

Answer 1

Я пытаюсь применить фоновый цвет к ряду используя ...

Если я правильно прочитал ваш вопрос, и учитывая, что у вас есть иthиtdэлементов в вашем столе, похоже, вы пытаетесь изменить background-color дочерних элементов строки одновременно при наведении курсора на строку.

Если это так, то это ваше решение:

tr:hover * { 
    background-color:#F69; 
    border:thin solid black; 
} 

Клетка Их все будет выделена при наведении курсора мыши.

В противном случае, если вы пытаетесь изменить background-color по одной ячейке за раз, я рекомендую ответ Мэдди.

Демо:

https://jsfiddle.net/5enks1zk/

Answer 2

Я думаю, что вы хотите что-то вроде this-

tr td:hover { 
 
    background-color: #F69; 
 
    border: thin solid black; 
 
}

<table width="100%"> 
 
<tr> 
 
    <th colspan="5">11 lbs</th> 
 
</tr> 
 
<tr> 
 
    <td width="20%">&nbsp;</td> 
 
    <td width="20%" bgcolor="#993300"></td> 
 
    <td width="20%" bgcolor="#993300"></td> 
 
    <td width="20%" bgcolor="#993300"></td> 
 
    <td width="20%">&nbsp;</td> 
 
</tr> 
 
</table>

Я надеюсь, что это будет поможет вам.