在HTML格式中使用`table-hover`类和＆＃34; rowspan＆＃34; s的引导表不会突出显示（onhover）引用其主要类别的行

Question

<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>

当我在使用rowspan的表上使用table-hover类时，当指向类别中的第二行时（至少在我的具体示例中），它不会为整行着色。

我希望它以这种方式运作：

• 当悬停在偶数行时：它也应该更改它的类别的bg颜色。
• 当悬停在某个类别上时：它应该更改链接到该类别的两行的bg颜色。

有没有办法克服这种情况？

仅使用CSS

这是我的代码的jsfiddle： https://jsfiddle.net/3t76xq66/1/