CSS技术求助：实现悬停第二个div隐藏第一个div及反向效果的问题

嘿，我完全懂你遇到的困扰——CSS的通用兄弟选择器~只能选中当前元素之后的同级元素，所以第二条规则.container div:nth-child(2):hover~div:nth-child(1)根本找不到前面的第一个div，自然不会生效。不过有两种简单靠谱的方法能解决这个问题，还能保持元素位置不变，我给你拆解一下：

方法一：纯CSS方案（利用父容器hover状态） #

我们可以借助父容器的hover状态，结合:not(:hover)选择器来选中未被悬停的子元素，这样就能实现双向隐藏的效果：

/* 基础样式：确保过渡平滑，保持元素位置 */
.container .box-container {
  opacity: 1;
  transition: opacity 0.3s ease;
  /* 这里可以加你的布局样式，比如宽高、margin等 */
  width: 120px;
  height: 120px;
  border: 1px solid #333;
  margin: 1rem;
  display: inline-block;
}

/* 悬停第一个盒子时，隐藏第二个 */
.container div:nth-child(1):hover ~ div:nth-child(2) {
  opacity: 0;
}

/* 悬停父容器但未悬停第一个盒子（即悬停第二个盒子）时，隐藏第一个 */
.container:hover div:nth-child(1):not(:hover) {
  opacity: 0;
}

原理说明： #

• 当鼠标悬停在第一个盒子上时，~能正常选中后面的第二个盒子并隐藏它；
• 当鼠标悬停在第二个盒子上时，父容器.container会触发hover状态，此时我们用:not(:hover)选中没有被直接悬停的第一个盒子，把它隐藏。

这种纯CSS方案不需要额外改动HTML，完全符合你的需求。

方法二：JavaScript方案（更灵活） #

如果以后你需要处理更多子元素，或者逻辑更复杂的场景，用JS会更直观：

<div class="container">
  <div class="box-container"> Box 1 </div>
  <div class="box-container"> Box 2 </div>
</div>

<style>
.box-container {
  opacity: 1;
  transition: opacity 0.3s ease;
  width: 120px;
  height: 120px;
  border: 1px solid #333;
  margin: 1rem;
  display: inline-block;
}
</style>

<script>
const boxes = document.querySelectorAll('.box-container');

boxes.forEach(box => {
  // 鼠标进入时，隐藏其他盒子
  box.addEventListener('mouseenter', () => {
    boxes.forEach(otherBox => {
      if (otherBox !== box) {
        otherBox.style.opacity = '0';
      }
    });
  });

  // 鼠标离开时，恢复所有盒子显示
  box.addEventListener('mouseleave', () => {
    boxes.forEach(otherBox => {
      otherBox.style.opacity = '1';
    });
  });
});
</script>

原理说明： #

• 给每个盒子绑定鼠标进入和离开事件；
• 进入某个盒子时，遍历所有盒子，隐藏当前盒子以外的其他元素；
• 离开时，把所有盒子的透明度恢复为1。

这种方法不管你有多少个子元素都能轻松适配，扩展性更强。

关键注意点： #

你原来用opacity: 0的做法非常正确——它只是让元素透明，不会改变元素的布局空间，所以能完美保持页面中元素的位置不变，不需要改用display: none或visibility: hidden（后者虽然也占空间，但过渡效果不如opacity流畅）。

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