Выделите две строки таблицы при наведении курсора CSS

Question

Изменение цвета фона строки в таблице при наведении мыши довольно просто с помощью CSS:

.HighlightableRow:hover
{
  background-color: lightgray;
}

И некоторых HTML:

<table>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
</table>

Иногда я хочу выделитьпара строк, когда я наводю указатель мыши на любой из них.Например, при отображении списка рабочих заданий в таблице у меня будет одна строка с создателем, датой создания, срочностью и т. Д., А вторая строка будет содержать исключение запрошенной работы.

Есть ли способ, кроме использования обработчиков событий onmouseover / onmouseout в JavaScript, создать этот эффект, подобный показанному выше?Желательно с помощью CSS.

Answer 1

Используйте элемент tbody для группировки строк.

tbody:hover { background:#eee;}

HTML:

<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
  </tbody>
</table>

Проверьте правильность использования сведений о "tbody", "thead" и "tfoot".

Answer 2

Это довольно просто сделать, если вы довольны выделением следующей строки.

tr:hover, tr:hover + tr {
background:#eee; }

Селектор css + просто выбирает непосредственно следующий элемент, если он соответствует вашему типу. Таким образом, в этом случае он выделяет текущую строку, а также следующую строку.

См. jsFiddle

Конечно, есть ограничения, если вы хотите сгруппировать два, поскольку вы не можете сделать «этот ряд и предыдущий». В этом случае я бы, вероятно, вложил две строки в новую таблицу внутри первой строки. Имеет смысл?

РЕДАКТИРОВАТЬ: что-то вроде этого

HTML

<table>
     <tr>
       <td>

         <table>

           <tr>
             <td>Hello</td>
             <td>World!</td>
           </tr>

           <tr>
             <td>Hello</td>
             <td>World!</td>
           </tr>

         </table>

       </td>
     </tr>
   </table>

CSS

tr:hover tr { background:#eee; }

Рабочая Скрипка

Answer 3

Я не знаю, как заставить события одного объекта взаимодействовать с другим объектом в обычном CSS. Обычно, когда вы хотите подключить такие пользовательские события, вы застреваете, используя какой-то язык логического программирования (в данном случае javascript).

Теперь, если вы решите пойти по этому пути, я могу помочь вам с очень простым jQuery сделать именно то, что вам нужно :). Модель привязки событий в jQuery фактически избавляет от боли в JavaScript.