无论rowpsan - css如何突出显示整行

Question

我有以下代码：

	tbody > tr:hover{
		background-color: lightgrey;
		cursor: pointer;
	}

<table border="1">
	<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">January</td>
    <td>Week 1</td>
    <td >$150</td>
  </tr>
  <tr>
    <td>Week 3</td>
    <td>$100</td>
  </tr>
  <tr>
    <td rowspan="2">February</td>
    <td>Week 2</td>
    <td >$50</td>
  </tr>
  <tr>
    <td>Week 1</td>
    <td>$80</td>
  </tr>
  </tbody>
</table>

当我将鼠标悬停在该行时，如何突出显示整行。

例如，当我将鼠标悬停在1月份时，它应该突出显示整个1月份的行，而不是因为rowspan属性而仅突出显示的是1行。

Answer 1

将样式移动到悬停td下的tr。此外，当第1行悬停时，突出显示兄弟行。唯一需要注意的是，如果第二个tr悬停，它将不会突出显示第一个单元格。

tr:hover > td {
  background-color: lightgrey;
  cursor: pointer;
}

tr:nth-child(2n + 1):hover + tr {
  background-color: lightgrey;
}

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Savings for holiday!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">January</td>
      <td>Week 1</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>Week 3</td>
      <td>$100</td>
    </tr>
    <tr>
      <td rowspan="2">February</td>
      <td>Week 2</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>Week 1</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Answer 2

tr:hover td:not([rowspan]) {background: red;}
  tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}

<table border="1">
	<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">January</td>
    <td>Week 1</td>
    <td >$150</td>
  </tr>
  <tr>
    <td>Week 3</td>
    <td>$100</td>
  </tr>
  <tr>
    <td rowspan="2">February</td>
    <td>Week 2</td>
    <td >$50</td>
  </tr>
  <tr>
    <td>Week 1</td>
    <td>$80</td>
  </tr>
  </tbody>
</table>