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

Изменить цвет фона строки в таблице при наведении указателя мыши довольно просто с помощью 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>

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

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

6
задан Brian Tompsett - 汤莱恩 17 July 2017 в 10:05
поделиться