自定义菜单问题：5个div鼠标悬停宽度变化时总宽度不受控且过渡非线性

问题分析 #

当前代码存在两个核心问题：

1. 宽度计算误差：使用float布局且未设置box-sizing: border-box，元素的border会额外占用宽度，加上硬编码百分比的精度问题，快速切换时总宽度容易失控。
2. 过渡不同步：每个菜单独立设置transition，JS直接修改宽度时，多个元素的过渡无法同步触发，导致视觉上的非线性效果。

优化方案 #

采用Flex布局配合类名控制状态，彻底解决宽度溢出和过渡不同步问题，同时大幅简化代码：

1. HTML结构（简化版） #

<div class="menu-container">
  <div class="menu-item">菜单1</div>
  <div class="menu-item">菜单2</div>
  <div class="menu-item">菜单3</div>
  <div class="menu-item">菜单4</div>
  <div class="menu-item">菜单5</div>
</div>

2. CSS样式（核心优化） #

/* 父容器：Flex布局保证总宽度100% */
.menu-container {
  display: flex;
  width: 100%;
}

/* 菜单项：默认平分宽度，border包含在宽度内 */
.menu-item {
  flex: 1; /* 默认每份占1份空间 */
  box-sizing: border-box;
  border: 1px solid white;
  height: 300px;
  background-color: grey;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 过渡flex属性，保证线性平滑 */
  transition: flex 0.8s linear;
}

/* 悬停时的激活状态：当前项占3份，其余占1份 */
.menu-item.active {
  flex: 3;
}

3. JavaScript逻辑（简洁高效） #

const menuContainer = document.querySelector('.menu-container');
const menuItems = document.querySelectorAll('.menu-item');

// 鼠标进入菜单容器时处理
menuContainer.addEventListener('mouseover', (e) => {
  if (e.target.classList.contains('menu-item')) {
    // 移除所有项的激活状态
    menuItems.forEach(item => item.classList.remove('active'));
    // 给当前项添加激活状态
    e.target.classList.add('active');
  }
});

// 鼠标离开菜单容器时重置所有项
menuContainer.addEventListener('mouseout', () => {
  menuItems.forEach(item => item.classList.remove('active'));
});

方案优势 #

• 总宽度稳定：Flex布局自动分配空间，box-sizing: border-box确保边框不占用额外宽度，始终保持100%总宽度。
• 过渡完全线性：通过修改flex属性触发过渡，浏览器统一计算布局，所有元素的过渡同步进行，视觉效果平滑一致。
• 代码可维护：无需硬编码ID，新增菜单项只需添加HTML元素即可，无需修改JS/CSS。
• 状态控制清晰：通过类名管理激活状态，避免快速切换时的样式叠加问题。

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