Как сделать изменение цвета одного div при наведении курсора на другой div?

Question

[Дмитрий Шмаков]

Здравствуйте.
Подскажите, пожалуйста, как реализовать такую фичу?
Есть таблица, в неё внесены некоторые данные. В нескольких таблицах есть данные требующие пояснения. Пояснения выводятся под таблицей в отдельных блоках. Необходимо сделать изменение цвета (выделение) конкретного пояснения при наведении на соответствующую ячейку таблицы. Иными словами, как сделать подсветку этого пояснения при наведении курсора на ячейку таблицы?
Возможно ли это сделать на чистом CSS или нужен будет JS?
Заранее спасибо.

Comments

[BerettaPiffy]

Попробуй селектор ~

[Дмитрий Шмаков]

BerettaPiffy, это будет работать, если у них один родитель. А если у меня первый будет в таблице, а второй после нее, у них уже не общие родители будут.

Answer 1

[ⓒⓢⓢ]

Возможно ли это сделать на чистом CSS

технически можно https://codepen.io/jrkdv/pen/KKwOBQr
но практичней использовать JS
это всё же некий хак и хромает кроссбраузерность

Comments

[Дмитрий Шмаков]

Спасибо, попробую так.

Answer 2

[Dante449]

section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}
<div class="section">
  <img src="https://i.pinimg.com/originals/2d/93/77/2d93772ccc2486cb04c45d712b14966b.png" />
  <div class="layer">Lorem Ipsum</div>
</div>