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

这个闪烁的坑我之前踩过！咱们先搞懂为啥会出现这种情况：

当你鼠标悬停在.box-one上时，CSS把它设为display: none——这时候这个元素直接从页面上“消失”了，鼠标瞬间就不在它上面了，.box-one:hover的触发条件也就不成立了。紧接着，.box-one又变回display: block，鼠标又重新悬停在它上面，触发隐藏操作……就这么无限循环，导致元素疯狂闪烁。

最靠谱的解决方案：用父容器承接hover状态 #

核心思路是把hover事件绑定在一个不会消失的父容器上，这样不管子元素怎么切换显示，hover状态都能稳定保持。

修改后的HTML代码：

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

对应的CSS代码：

/* 父容器：保持原布局的inline-block，把原.box的margin移到这里 */
.box-container {
  display: inline-block;
  margin: 20px 40px;
}

.box {
  width: 300px;
  height: 150px;
  border-radius: 4px;
  cursor: pointer;
}

.box-one {
  background: green;
}

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

/* 悬停父容器时，控制两个子元素的显示状态 */
.box-container:hover .box-one {
  display: none;
}

.box-container:hover .box-two {
  display: block;
}

为什么这个方案能解决问题？ #

因为父容器.box-container始终存在于页面上，只要鼠标在它的区域内，hover状态就会一直生效。不管.box-one和.box-two怎么切换显示，都不会影响父容器的存在，自然就不会出现“hover状态反复触发/取消”的情况了。

其他替代思路（按需选择） #

如果你不想加父容器，也可以用不脱离文档流的属性来切换显示，比如opacity或visibility：

• opacity: 0：元素仍占位置，只是看不见
• visibility: hidden：同样占位置，只是隐藏

但这两种方法会保留元素的布局空间，可能不符合你原本的需求，所以还是父容器的方案最贴合你的场景。

内容的提问来源于stack exchange，提问作者Idris