Как сделать один :hover для двух элементов?

Question

У меня есть родительский элемент – желтый блок. И дочерний – фиолетовый блок. Отдельно для каждого блока я прописываю :hover, так как при наведении каждому из них я прописываю разные параметры.

Вопрос: как сделать так, чтоб при наведении на всю область родительского блока, :hover срабатывал сразу для желтого и фиолетового блоков, НО при этом параметры, которые меняются при наведении были по-прежнему разными?

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  transition: 2s linear;
  display: flex;
  align-items: center;
}

.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  transition: 2s linear;
  border: 2px double white;
}


.block:hover {
  background: yellowgreen;
  width: 100%;
}

.block_child:hover {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}

<div class="block">
  <div class="block_child"></div>
</div>

Потому что на данный момент: наведение на желтый блок – меняются параметры желтого блока, наведение на фиолетовый блок – меняются параметры фиолетового блока. Как сделать так, чтобы это все работало вместе?

Answer 1

Это можно сделать следующим образом, вешаем событие hover на родительский элемент и "говорим" что если hover, то к родителю и ребенку должны быть применены следующие стили:

.block:hover {
  background: yellowgreen;
  width: 100%;
}

.block:hover > .block_child {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}

// селектор > означает что стили будут
// применены только к прямым потомкам
// если это не требуется, то достаточно
// .block:hover .block_child

Рабочий пример на основе вашего кода:

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  transition: 2s linear;
  display: flex;
  align-items: center;
}

.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  transition: 2s linear;
  border: 2px double white;
}

.block:hover {
  background: yellowgreen;
  width: 100%;
}

.block:hover > .block_child {
  width: 100%;
  background: yellow;
  border: 2px transparent;
}

<div class="block">
  <div class="block_child"></div>
</div>

БЛОГ НА HUSL

Как сделать один :hover для двух элементов?

Ответы (1 шт):