鼠标悬停时使Flex子元素扩展至全屏宽度：仅用CSS实现还是需要JavaScript？

这个问题提得很好！咱们先来明确结论：仅靠纯CSS没法完美实现让Flex子元素鼠标悬停时扩展至全屏宽度，不过可以用JavaScript轻松达成这个效果，下面详细说明：

为什么纯CSS做不到？ #

Flex布局的空间分配是基于容器内所有子元素的flex属性共同决定的。要让单个子元素占满全屏，就得让其他所有兄弟元素的空间被完全挤压掉（即flex: 0）。但CSS的兄弟选择器（+、~）只能选中当前元素之后的兄弟节点，没法选中之前的，所以没法一次性控制所有其他子元素的flex值，也就做不到真正的全屏效果。

纯CSS近似方案（有局限性） #

如果你可以接受“仅挤压hover元素后面的兄弟”，可以试试这个CSS写法，但前面的兄弟元素还是会保留空间，没法完全全屏：

/* 替换原来的.panel:hover规则 */
.panel:hover {
  flex: 9999; /* 用足够大的值抢占空间 */
}
.panel:hover ~ .panel {
  flex: 0;
  overflow: hidden;
}

JavaScript完美解决方案 #

通过JS我们可以轻松控制所有兄弟元素的状态，实现真正的全屏扩展效果：

步骤1：修改CSS，新增控制类 #

先在原有CSS基础上添加两个类，用来控制激活和收缩状态：

/* 保留你原有的所有CSS，新增以下规则 */
.panel.active {
  flex: 100; /* 足够大的数值，确保占满容器 */
  transition: flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11);
}
.panel.inactive {
  flex: 0;
  overflow: hidden; /* 隐藏收缩后的内容 */
  transition: flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11);
}

注意：可以把原CSS中.panel的transition属性拆分一下，确保状态切换的动画流畅。

步骤2：添加JavaScript逻辑 #

通过监听鼠标的mouseenter和mouseleave事件，动态给面板添加/移除类：

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => {
  // 鼠标进入时，激活当前面板，收缩其他面板
  panel.addEventListener('mouseenter', () => {
    panel.classList.add('active');
    panels.forEach(otherPanel => {
      if (otherPanel !== panel) {
        otherPanel.classList.add('inactive');
      }
    });
  });

  // 鼠标离开时，恢复所有面板的初始状态
  panel.addEventListener('mouseleave', () => {
    panels.forEach(p => {
      p.classList.remove('active', 'inactive');
    });
  });
});

效果说明 #

• 鼠标悬停任意面板时，该面板会平滑扩展至全屏宽度，其他面板会收缩隐藏；
• 鼠标离开后，所有面板会平滑恢复到初始的等分状态；
• 完全符合你要求的全屏扩展需求。

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