Выделите строку наведения и следующую строку

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", ваша таблица должны иметь иметь "класс с именем таблицы" . Когда вы дадите ему класс, он должен работать.

UPDATE

Есть, вероятно, некоторые другие методы, но с чистой 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; 
} 

Answer 2

Попробуйте

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

нужно написать CSS для Tr: парить

Answer 3

Попробуйте

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