如何在一个悬停时切换两个兄弟元素的显示属性？

Question

当我将鼠标悬停在第一个兄弟元素上时，我试图切换两个兄弟元素的显示。我想将悬停的第一个兄弟元素的显示从块更改为无，而其直接或下一个兄弟元素的样式从无更改为块。我能够为此编写一个 css 代码，但是在悬停时，元素不断闪烁并在一个永无止境的循环中交替。下面是我的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>