html - 突出显示悬停行和下一行

Question

我正在使用此 CSS 突出显示悬停的行。

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
} 

我的问题是我正在使用 rowspan=2，所以我需要突出显示行跨度中的行。它的 css 是什么。

HTML

<table class="table">
<thead>
  <tr>
    <th></th>
    <th width="10%" >Req ID</th>
    <th width="10%">Date</th>
    <th width="5%">Qty</th>
    <th colspan="3" width="45%">Plant Info</th> 
    <th width="10%">Picture</th>
    <th width="10%">Pic type</th>
    <th width="30%" >Action</th>

  </tr>
</thead>
<tbody>


 <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>   
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
  </tr>
   <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>   
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td colspan="3"></td>
      </tr>


</tbody>

问题的屏幕截图。此行有行跨度，而我将其悬停时仅突出显示第一行。

Answer 1

除非我误解了你的问题

.table tbody td:hover, .table tbody th:hover {
background-color: #eeeeea;
}

或

.table tbody tr td:hover, .table tbody tr th:hover {
background-color: #eeeeea;
}

由于您使用的是“.table”，因此您的表需要有一个“名为表的类” .给它上课后，它应该可以工作。

更新

可能还有一些其他的方法，但是我想你可以像下面那样使用纯 HTML 和 CSS。

将 tr 与 tbody 组合在一起，然后将鼠标悬停在 tbody 上。

HTML

<table class="table" border=1>
    <thead>
        <tr>
            <th></th>
            <th width="10%">Req ID</th>
            <th width="10%">Date</th>
            <th width="5%">Qty</th>
            <th colspan="3" width="45%">Plant Info</th>
            <th width="10%">Picture</th>
            <th width="10%">Pic type</th>
            <th width="30%">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">asd</td>
            <td rowspan="2">d</td>
            <td rowspan="2">s</td>
            <td rowspan="2">d</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td rowspan="2">asd</td>
            <td rowspan="2">ds</td>
            <td rowspan="2">asd</td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>

CSS

.table tbody:hover {
    background-color:yellow;
}