Наведите курсор на другой набор элементов таблицы

Question

у меня 4 строки, 3 столбца. для двух столбцов установлен оранжевый цвет, а в последних столбцах для фона задан зеленый цвет. я установил фоновый цвет для строки на красный. также я установил тот же самый цвет фона на последние столбцы, просто пытаясь выделить его, когда наведу на него курсор мыши в любом месте на каждой строке и столбце. я хочу, чтобы красным цветом были выделены все строки и столбцы, когда указатель мыши указывает на любую строку / столбец.

это мой кодовый блок для кода https://codepen.io/dedecodepen/pen/KKdNNbJ

<table>

   <tr>
   <td>OrangeA1</td>
   <td>OrangeB1</td>
   <td>GreenC1</td>
   </tr>

   <tr>
   <td>OrangeA2</td>
   <td>OrangeB2</td>
   <td>GreenC2</td>
   </tr>

   <tr>
   <td>OrangeA3</td>
   <td>OrangeB3</td>
   <td>GreenC3</td>
   </tr>

   <tr>
   <td>OrangeA4</td>
   <td>OrangeB4</td>
   <td>GreenC4</td>
   </tr>

</table>

table { 
  width: 300px;
  color: white;
}

tr {
  background-color: orange;
}

td:nth-child(3) {
  background-color: seagreen;
}

/*hover-start*/

tr:hover, td:nth-child(3):hover {
  background-color: red;
}

/*hover-end*/