Таблицы начальной загрузки, использующие класс table-hover и rowspan в HTML, не выделяют (при наведении курсора) даже строки, относящиеся к их основной категории

<table class = "table table-hover" border = "1">
 <tbody>
 <tr>
   <td rowspan = "2">potato</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan = "2">banana</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan = "2">apple</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 </tbody>
</table>

Когда я использую класс table-hover для таблицы с помощью rowspan, он не окрашивает всю строку при указании на вторую строку в категории (по крайней мере, в моем конкретном примере).

Я хочу, чтобы он работал так:

• При наведении курсора на четную строку: он также должен изменить цвет bg для этой категории.
• При наведении курсора на категорию: он должен изменить цвет bg обеих строк, связанных с категорией.

Есть ли способ выйти из этой ситуации?

Желательно только с использованием CSS

Вот jsfiddle для моего кода: https://jsfiddle.net/3t76xq66/1/