Flexbox列悬停交互异常：快速切换悬停目标时列全部收缩问题排查与解决

我明白你遇到的痛点了——用纯CSS实现的话，当快速在列之间切换时，因为过渡动画还在进行中，多个元素的hover状态会互相干扰，导致所有列都收缩，达不到预期的“悬停列立即展开，其余同步收缩”的效果。咱们用JavaScript来精准控制每一列的状态，就能完美解决这个问题。

问题根源 #

纯CSS的:hover伪类是基于鼠标当前位置的，当快速切换悬停目标时，前一个元素的过渡还没结束，新元素的hover状态又触发了，这就会导致Flex布局的计算出现混乱，出现所有列都收缩的异常情况。而JavaScript可以主动控制每个元素的激活状态，避免这种冲突。

完整解决方案代码 #

HTML

<div id="wrapper"> 
  <div class='chapter' style="background-color:red;"></div> 
  <div class='chapter' style="background-color:gray;"></div> 
  <div class='chapter' style="background-color:blue;"></div> 
  <div class='chapter' style="background-color:green;"></div> 
  <div class='chapter' style="background-color:purple;"></div> 
</div>

CSS

#wrapper { 
  height: 100vh; 
  display: flex; 
  flex-direction: row; 
} 

#wrapper > .chapter { 
  flex: 0 1 2vw; 
  transition: flex 1s ease-in-out; 
  border: 1px solid black; 
} 

/* 激活状态的列展开 */
#wrapper > .chapter.active { 
  flex: 1 1 33vw; 
}

JavaScript

const wrapper = document.getElementById('wrapper');
const chapters = document.querySelectorAll('.chapter');

// 给每个列添加鼠标进入事件监听
chapters.forEach(chapter => {
  chapter.addEventListener('mouseenter', () => {
    // 先移除所有列的active类
    chapters.forEach(item => item.classList.remove('active'));
    // 给当前悬停的列添加active类
    chapter.classList.add('active');
  });
});

// 可选：鼠标离开wrapper时，所有列恢复初始状态
wrapper.addEventListener('mouseleave', () => {
  chapters.forEach(item => item.classList.remove('active'));
});

代码解释 #

1. CSS部分：去掉了原来的:hover伪类，改用.active类来控制列的展开状态，这样状态的切换完全由JS掌控，不会受鼠标快速移动的干扰。
2. JavaScript部分：
   • 监听每个列的mouseenter事件，一旦触发，先把所有列的active类移除，再给当前列加上active类，确保只有当前悬停的列处于展开状态。
   • 可选的mouseleave监听是为了让鼠标离开整个容器时，所有列恢复初始宽度，你可以根据需求决定是否保留。
3. 过渡效果：把过渡属性明确指定为flex，避免不必要的属性过渡，让动画更精准。

这样修改后，不管你怎么快速切换悬停的列，都会立即让当前列展开，其余列同步收缩，完全符合你的预期效果！

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