Как переключить свойство отображения двух родственных элементов при наведении курсора на один?

Question

Я пытаюсь переключить отображение двух одноуровневых элементов при наведении курсора на первого одноуровневого элемента. Я хочу изменить отображение зависшего первого родственного элемента с block на none, в то время как стиль его непосредственного или следующего родственного элемента изменяется на блокировку с none. Я смог написать для этого код css, но при наведении курсора элементы постоянно мерцают и чередуются в бесконечном l oop. Ниже мой код html и css:

.box {
  display: inline-block;
  width: 300px;
  height: 150px;
  margin: 20px 40px;
  border-radius: 4px;
  cursor: pointer;
}

.box-one {
  background: green;
}

.box-two {
  background: whitesmoke;
  display: none;
}

.box-one:hover {
  display: none;
}

.box-one:hover+.box-two {
  display: block;
}

<div class="box box-one"></div>
<div class="box box-two"></div>

Answer 1

Оберните два поля другим div (.container) и переключайте их при наведении на контейнер:

.box {
  display: inline-block;
  width: 300px;
  height: 150px;
  margin: 20px 40px;
  border-radius: 4px;
  cursor: pointer;
}

.box-one {
  background: green;
}

.box-two {
  background: whitesmoke;
}

.container {
  width: fit-content;
}

.container:hover>.box-one {
  display: none;
}

.container:not(:hover)>.box-two {
  display: none;
}

<div class="container">
  <div class="box box-one"></div>
  <div class="box box-two"></div>
</div>

Используя события JS mouseenter и mouseleave, вы можете добавить прослушиватель событий с опцией once: true только к текущему элементу. Как только указатель мыши входит, вы показываете новый элемент, и только когда пользователь покидает текущий элемент, вы добавляете новый mouseenter прослушиватель событий к текущему элементу и так далее ...

const showNext = evt => {
  const current = evt.target
  const next = current.nextElementSibling

  if(!next || !next.classList.contains('box')) return
  
  current.classList.remove('show')

  next.classList.add('show')
  
  next.addEventListener('mouseleave', () => {
    next.addEventListener('mouseenter', showNext, { once: true })
  }, { once: true })
}

document.querySelector('.box')
  .addEventListener('mouseenter', showNext, { once: true })

.box {
  display: none;
  width: 300px;
  height: 150px;
  margin: 20px 40px;
  border-radius: 4px;
  cursor: pointer;
}

.show {
  display: inline-block;
}

.box-one {
  background: green;
}

.box-two {
  background: whitesmoke;
}

.box-three {
  background: red;
}

.box-four {
  background: blue;
}

.container {
  width: fit-content;
}

<div class="box box-one show"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
<div class="box box-four"></div>