有没有办法让 CSS 突出显示整行，包括行跨度内的单元格，而不仅仅是第一行？

正如你从示例中看到的，只有该行的第一行被突出显示，而其他单元格没有突出显示，这显然看起来很混乱，我宁愿只使用 CSS 来清除它，但如果有的话会使用 Javascript别无退路。

http://codepen.io/anon/pen/jErMee http://codepen.io/anon/pen/jErMee

HTML

<table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10">
  <tbody>
    <tr>
      <td>Package</td>

      <td>Includes</td>

      <td>Number of recruits</td>

      <td>Cost per recruit + VAT</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£105</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£120</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£135</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£150</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£175</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£200</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£225</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£250</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£220 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£275 (40% payable upfront)</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£300 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£375 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>Lorem ipsum dolor sit amet</td>

      <td>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td><br /></td>

      <td><br /></td>
    </tr>
  </tbody>
</table>

CSS:

body {
  padding: 50px;
}

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

td, th {
   padding: 20px;
  border: 1px solid black;
}


tr:hover td {
    background-color: blue;
}

有一个 JSBin。 http://jsbin.com/yabepe/1/edit?html,css,output

我省略了您的部分代码，只是为了方便显示。

问题的关键在于<tbody>。一个表必须有一个<thead>,但可以有很多<tbody>。 因此，使用这些代码：

tbody:hover .td {
    background-color: blue;
}