Как изменить цвет шрифта текста при наведении курсора на любую часть <td>или <tr>?

Question

У меня есть таблица без фона, я хочу, чтобы <td> или даже вся <tr> меняли цвет фона и цвет шрифта при наведении курсора. Я знаю, как изменить цвет фона и цвет текста при наведении курсора

 tr:hover {
       background-color: #ddd;
       color: black;
}

. Однако это изменит цвет текста только в том случае, если я наведу курсор мыши на фактический текст и хочу изменить как текст, так и фон цвета, если я наведу курсор на любую часть <td> / <tr>, не обязательно на сам текст.

Answer 1

Я нашел это в сети, это может помочь вам:

<style style="text/css">
  .hoverTable{
    width:100%; 
    border-collapse: collapse; 
  }
  .hoverTable td{ 
    padding: 7px; 
    border: #444fa6 1px solid;
  }
  /* Define the default color for all the table rows */
  .hoverTable tr{
    background-color: #6b76d1;
  }
  /* Define the hover highlight color for the table row */
  .hoverTable tr:hover {
    background-color: #9aa3ed;
    color: #a456ba;
  }
</style>

<table class="hoverTable">
  <tr>
    <td>Text 1A</td>
    <td>Text 1B</td>
    <td>Text 1C</td>
  </tr>
  <tr>
    <td>Text 2A</td>
    <td>Text 2B</td>
    <td>Text 2C</td>
  </tr>
  <tr>
    <td>Text 3A</td>
    <td>Text 3B</td>
    <td>Text 3C</td>
  </tr>
</table>