Разделить слайд братьев и сестер, один брат влияет на другого при наведении

Question

Я пытаюсь добиться эффекта, аналогичного заголовку Navy.com, когда вы наводите курсор на одного брата, и он скользит, занимая большую часть пространства, уменьшая и скрывая содержимое другого брата.

Из-за стандарта CSS невозможности выбрать предыдущих братьев и сестер, я могу добиться эффекта только с одной стороны, а не с другой. Я понимаю, что это невозможно с одним CSS.

Заранее благодарю за помощь!

Вот код, который я сейчас использую:

.container {
  display: flex;
  flex-direction: row-reverse;
}

.b1 {
  display: flex;
  order: 2;
  width: 50%;
  height: 150px;
  padding: 10px;
  background-color: rgb(40, 251, 202);
  transition: all 0.5s;
}

.b2 {
  display: flex;
  width: 50%;
  order: 1;
  height: 150px;
  padding: 10px;
  background-color: rgb(227, 29, 103);
  transition: all 0.5s;
}

.b1:hover {
  width: 80%;
}

.b2:hover {
  width: 80%;
}

.b1:hover~.b2 {
  background-color: rgba(227, 29, 103, 0.4);
  width: 20%;
}

.b2:hover~.b1 {
  background-color: rgba(40, 251, 202, 0.4);
  width: 20%;
}

.b1:hover~.b2 span {
  display: none;
}

.b2:hover~.b1 span {
  display: none;
}

<div class="container">
  <div class="b2">
    <span>This content will show up directly in its container.</span>
  </div>
  <div class="b1">
    <span>This content will show up directly in its container.</span>
  </div>
</div>

Answer 1

С небольшой перестройкой вы сможете достичь желаемого эффекта только с CSS. В этой реализации я использую селектор : не CSS в сочетании с некоторыми многоуровневыми селекторами :hover (которые работают, потому что .container и .child занимают одинаковое пространство)

Хотя, просто как совет: воспользуйтесь преимуществами автоматического увеличения flex и полностью удалите width: 20%; logi c. Таким образом, дочерние элементы unhovered компонента будут занимать одинаковое пространство, а дочерний элемент hovered все равно будет иметь ширину 80%. Это позволит вам динамически добавлять больше элементов без необходимости изменения жестко закодированного CSS.

.container {
  display: flex;
}

.child {
  width: 50%;
  height: 150px;
  padding: 10px;
  transition: all 0.5s;
}

.child--red {
  background-color: rgba(227, 29, 103, 1);
}

.container:hover .child--red:not(:hover) {
  background-color: rgba(227, 29, 103, 0.4);
}

.child--green {
  background-color: rgba(40, 251, 202, 1);
}

.container:hover .child--green:not(:hover) {
  background-color: rgba(40, 251, 202, 0.4);
}

.container:hover .child:not(:hover) span {
  display: none;
}

.container:hover .child {
  width: 20%;
}

.container:hover .child:hover {
  width: 80%;
}

<div class="container">
  <div class="child child--green">
    <span>This content will show up directly in its container.</span>
  </div>
  <div class="child child--red">
    <span>This content will show up directly in its container.</span>
  </div>
</div>