Podświetlanie wiersza tabeli po najechaniu myszką

Cześć,
nie wiele wspólnego mam z front-endem ale stanąłem przed zadaniem z którym od dłużeszgo czasu nie moge sobie poradzić.
Mam prostą tabelkę:

<table class="zui-table zui-table-horizontal zui-table-highlight">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td style="background-color: #CFF5FC;">DeMarcus Cousins</td>
            <td style="background-color: #CFF5FC;">C</td>
            <td rowSpan="2" style="background-color: red;">6'11"</td>
            <td style="background-color: #CFF5FC;">08-13-1990</td>
            <td style="background-color: #CFF5FC;">$4,917,000</td>
        </tr>
        <tr>
            <td style="background-color: #CFF5FC;">Isaiah Thomas</td>
            <td style="background-color: #CFF5FC;">PG</td>
            <td style="background-color: #CFF5FC;">5'9"</td>
            <td style="background-color: #CFF5FC;">$1,895,960</td>
        </tr>
        <tr>
            <td style="background-color: #CFF5FC;">Ben McLemore</td>
            <td style="background-color: #CFF5FC;">SG</td>
            <td style="background-color: #CFF5FC;">6'5"</td>
            <td rowSpan="2" style="background-color: yellow;">02-11-1993</td>
            <td style="background-color: #CFF5FC;">$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>

css:

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table-highlight tbody tr:hover {
    background-color: #CCE7E7;
}
.zui-table-horizontal tbody td {
    border-left: none;
    border-right: none;
}

kolory wszystkich komórek w pierwszych 3 wierszach pobierane są z bazy danych dlatego są one w html a nie css.
Chciałbym uzyskać taki efekt, że po najechaniu na niebieskie pole w której kolwiek komórce w pierwszych trzech wierszach, wszystkie komórki w tym wierszu się podświetlają/zmieniają kolor.
Dodałem 2 ostatnie wiersze bez żadnego koloru a w css tr:hover który robi dokładnie to co chciałbym uzyskać dla pierwszych 3 wierszy.

Przykład: http://tpcg.io/_OCRX5M

Mam nadzieje, że opisałem w miarę zrozumiale :)
Czy ktoś może wie jak uzyskać taki efekt?

Mówiąc prostymi słowami, style zadeklarowane w atrybucie są dla przeglądarki ważniejsze niż te, które pobiera z pliku css, chyba że użyjemy słówka !important żeby je nadpisać. Dodatkowo w tym wypadku powinieneś zmieniać właściwość background-color znaczników td / th, bo znacznik tr ma swój własny osobny kolor.

Z opisu nie jestem pewien na której wersji finalnie Ci zależy, więc zrobiłem dwie

1) Kolorowanie wszystkich komórek z danego wiersza

.zui-table-highlight tbody tr:hover td, 
.zui-table-highlight tbody tr:hover th {
    background-color: #CCE7E7 !important;
}

2) Kolorowanie wszystkich komórek, ale jedynie z trzech pierwszych wierszy

.zui-table-highlight tbody tr:nth-child(-n + 3):hover td, 
.zui-table-highlight tbody tr:nth-child(-n + 3):hover th {
    background-color: #CCE7E7 !important;
}

@Xarviel: o to chodziło.
A czy jest możliwość, żeby po najechaniu zmieniał kolor tylko tych niebieskich komórek (#CFF5FC)?
teraz po najechaniu na komórkę w 1 wierszu tabelka wygląda tak:

idealnie było by gdyby to

td rowSpan="2" style="background-color: red;">6'11"</td

lub to

td rowSpan="2" style="background-color: yellow;">02-11-1993</td

zostawił w swoim standardowym kolorze a podmienił tylko wszystkie komórki w wierszu które mają kolor #CFF5FC

Można wykluczyć podwójne komórki dzięki funkcji :not, td:not([rowspan)

.zui-table-highlight tbody tr:hover td:not([rowspan]), 
.zui-table-highlight tbody tr:hover th:not([rowspan]) {
    background-color: #CCE7E7 !important;
}

Chyba, że może się zdarzyć też pojedyncza żółta komórka, albo jakakolwiek inna, którą chciałbyś pominąć, bo mówiłeś, że kolory ustala backend, to wtedy trzeba się pobawić z css variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

<table class="zui-table-highlight">
  <tbody>
    <tr>
      <td>Niebieska komórka</td>    
      <td>Niebieska komórka</td>    
      <td style="--cell-background: yellow; --cell-background-hover: yellow;">Żółta komórka</td>    
      <td style="--cell-background: red; --cell-background-hover: red;">Czerwona komórka</td>
    </tr>
  </tbody>
</table>

<style>
  .zui-table-highlight {
    /* 
      Te zmienne są dziedziczone na pozostałe elementy (dzieci) danego znacznika
      i można bez problemu przypisać je do atrybutu style
    */
    --cell-background: blue;
    --cell-background-hover: green;
  }
  
  .zui-table-highlight tbody td, 
  .zui-table-highlight tbody th {
    background: var(--cell-background);
  }

  .zui-table-highlight tbody tr:hover td,
  .zui-table-highlight tbody tr:hover th {
    background: var(--cell-background-hover);
  }
</style>

żeby nie ustalać na sztywno w kodzie takiej kombinacji

.zui-table-highlight tbody tr:hover td[style="background-color: #CFF5FC;"],
.zui-table-highlight tbody tr:hover th[style="background-color: #CFF5FC;"] {
  background: #CCE7E7 !important;
}

bo w momencie zmiany domyślnego koloru, automatycznie przestaje nam to działać i trzeba zaktualizować selektor.

@Xarviel dokładnie o to mi chodziło!
back-end steruje kolorami ale w komórkach gdzie rowSpan >1 dla pozostałych zawsze będzie przychodził kolor #CFF5FC więc w moim przypadku działa idealnie.
Nie widziałem, że takie są możliwości używając tylko css, to mam ostatnie pytanie. :) czy dało by się zrobić tak aby po najechaniu na komórkę 'Isaiah Thomas' poza niebieskimi kolor zmieniła też czerwona komórka? żeby np zmieniła odcień tak aby było widać że jest w zaznaczonym wierszu? :)

Raczej trzeba byłoby zmienić strukturę html, bo z punktu widzenia css, ta komórka znajduje się jedynie w pierwszym wierszu, a nie drugim

https://stackoverflow.com/a/15465002 (coś takiego, tylko trzeba byłoby zmienić selektor przy hover)