不考虑rowspan，如何将整行突出显示- 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属性而突出显示一半的行。

- helloworld1234

Answer 1

将样式移动到鼠标悬停的下的中。此外，当第一行被悬停时，突出显示兄弟行。唯一的注意事项是，如果悬停第二个，它不会突出显示第一个单元格。

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>

- Ori Drori

---

谢谢回答，我会尝试寻找其他突出显示第一行的解决方案... - helloworld1234

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>

- Dhaarani

---

谢谢您的回复，是否也可以将第一个单元格进行高亮显示，我指的是“一月”或“二月”... - helloworld1234

@helloworld1234 现在检查一下。tr:hover td[rowspan]:hover {background: yellow;} 可以突出显示“January”或“February”。 - Dhaarani