非常规DOM结构下的元素隐藏问题

我明白你遇到的棘手问题了——DOM结构限制了CSS选择器的遍历，还要死守Flex布局的表现，确实挺头疼的。下面分几种方案来解决，你可以根据自己的DOM结构选最合适的：

方案一：纯CSS解决（如果DOM结构允许） #

如果你的.seperator是.flex-zero的同级元素（不管前后位置），可以用CSS的兄弟选择器直接实现：

/* 当.flex-zero被hover时，隐藏后面的.seperator */
.flex-zero:hover ~ .seperator {
  display: none;
}

/* 如果.seperator在.flex-zero前面，CSS目前没法直接反向选择，这时候就得用JS或者调整DOM了 */

要是你的DOM结构是嵌套的（比如.flex-zero在某个子容器里，.seperator在另一个子容器），CSS选择器就无能为力了，这时候看方案二。

方案二：JavaScript方案（无需调整DOM） #

这种方法不用动DOM结构，直接通过事件监听来控制元素显示隐藏，兼容性也拉满：

// 获取所有.flex-zero元素
const flexZeroElements = document.querySelectorAll('.flex-zero');
// 获取对应的.seperator元素（这里假设是单个，如果多个要对应好关系）
const seperator = document.querySelector('.seperator');

flexZeroElements.forEach(el => {
  // 鼠标悬停时隐藏
  el.addEventListener('mouseover', () => {
    seperator.style.display = 'none';
  });
  // 鼠标离开时恢复
  el.addEventListener('mouseout', () => {
    seperator.style.display = ''; // 恢复原有样式
  });
});

如果.flex-zero和.seperator是一对多的关系，你可以通过父容器来关联它们，比如：

el.addEventListener('mouseover', () => {
  // 找到当前.flex-zero所在的.selector-wrap下的.seperator
  el.closest('.selector-wrap').querySelector('.seperator').style.display = 'none';
});

方案三：调整DOM但保持Flex布局不变 #

如果想回到纯CSS方案，又不想破坏Flex表现，可以调整DOM结构，把.flex-zero和.seperator放到同一个Flex上下文里，同时通过flex属性精确控制布局，和原来完全一致。

比如原来的结构可能是：

<div class="selector-wrap">
  <div class="flex-container">
    <div class="flex-zero">...</div>
  </div>
  <div class="seperator">...</div>
</div>

可以改成：

<div class="selector-wrap">
  <div class="flex-zero">...</div>
  <!-- 保持其他元素的flex属性和原来一致 -->
  <div class="seperator">...</div>
</div>

然后调整CSS里的flex值，让每个元素的占比、对齐方式和原来完全相同，比如原来子容器的flex:1，现在直接给.flex-zero和其他元素设置flex:1，这样Flex布局的表现和之前一模一样，同时就能用CSS兄弟选择器实现hover隐藏了。

最后附上你提供的原始代码片段，方便参考：

.selector-wrap { 
  margin: 5px 0 0 0; 
  width: 100%; 
  border: 1px solid; 
  display: flex; 
  justify-content: space-evenly; 
  > div { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex: 1;
    /* 省略其他样式 */
  }
}

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