如果你的问题是关于当徘徊100美元，彼得和路易斯行都应该得到突出显示，那么你不能这样做，根据我的理解，单独使用css。你应该使用js脚本。
检查以下代码段以供参考。使用rowspan悬停在td上。希望这能帮上忙。

$('.hasRowSpan').hover(function(){
	$(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

 tr:hover{background-color:red}

.bg-red{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新：当rowspan超过2行时，可以使用nextAll()。

根据您的评论在下面找到更新的片段。

$('tr').hover(function() {
  if ($(this).find('td').hasClass('hasRowSpan')) {
    $(this).next('tr').toggleClass('bg-red');
  }
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Rijo</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新1：我只是根据你的评论更新了剧本。注意：如果rowspan大于2，我确定这不会起作用。

$('.hasRowSpan').hover(function() {
  $(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

$('tr').hover(function() {
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Rijo</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新2：检查上面的片段，我已经改变了我的代码，按照你想要的输出。

有一种方法可以在html和cs中做到这一点，只要你对你的行在不同的tbody标签中没有问题。

table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    tbody:hover{background-color:#f5f5f5}

<h2>Hoverable Table</h2>
    <p>Move the mouse over the table rows to see the effect.</p>
    
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
      <tbody>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
          <td rowspan="2">$100</td>
        </tr>
        <tr>
          <td>Lois</td>
          <td>Griffin</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>Joe</td>
          <td>Swanson</td>
          <td rowspan="2">$300</td>
        </tr>
        <tr>
          <td>Cleveland</td>
          <td>Brown</td>
        </tr>
      </tbody>
    </table>