Таблицы и изменение фона через псевдокласс :hover

[Мади]

<div class="selectors">
      <table class="table">
        <thead>
          <tr>
            <th>Teams</th>
            <th>Capitains</th>
            <th>AWPers</th>
            <th>Riflers</th>
            <th>Riflers</th>
            <th>Supports</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="navi">Na'Vi</td>
            <td class="gambit">Nafany</td>
            <td class="vp">Jame</td>
            <td class="gambit">Axile</td>
            <td class="spirit">s1ren</td>
            <td class="navi">Perfecto</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="gambit">Gambit</td>
            <td class="navi">BoomBl4</td>
            <td class="spirit">degster</td>
            <td class="spirit">magixx</td>
            <td class="navi">b1t</td>
            <td class="gambit">interz</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="vp">Virtus Pro</td>
            <td class="spirit">chopper</td>
            <td class="navi">s1mple</td>
            <td class="vp">YEKINDAR</td>
            <td class="gambit">Hobbit</td>
            <td class="vp">Qikert</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td class="spirit">Team Spirit</td>
            <td class="vp">FL1T</td>
            <td class="gambit">sh1ro</td>
            <td class="navi">electronic</td>
            <td class="vp">boster</td>
            <td class="spirit">Patsi</td>
          </tr>
        </tbody>
      </table>
    </div>

Задача: Нужно что бы при наведений на один элемент с классом navi, gambit и тд фон ячеек с этим классом менялся на какой то цвет.

Проблема в том что не могу использовать JS нужно написать на HTML и CSS. сам пытался не получается 

[klierik]

На пример вот так: