如何仅用CSS实现hover levelFive时隐藏其所有前置同级元素？

可以实现，但需要借助CSS的:has()伪类，并且需要将所有目标div放在一个共同的父容器中（因为CSS没有原生的前置兄弟选择器，只能通过父容器间接选中前置元素）。

步骤1：调整HTML结构，添加父容器 #

给所有dropDownMenus类的div包裹一个父容器，比如menu-container：

<div class="menu-container">
  <div class="dropDownMenus levelOne"></div>
  <div class="dropDownMenus levelTwo"></div>
  <div class="dropDownMenus levelThree"></div>
  <div class="dropDownMenus levelFour"></div>
  <div class="dropDownMenus levelFive"></div>
</div>

步骤2：编写CSS代码 #

利用:has()伪类检测父容器内的.levelFive是否处于hover状态，然后选中所有非.levelFive的dropDownMenus元素并隐藏：

/* 当.levelFive被hover时，隐藏所有前置的dropDownMenus元素 */
.menu-container:has(.levelFive:hover) .dropDownMenus:not(.levelFive) {
  display: none;
}

如果需要更精确地指定要隐藏的类（而非用:not()），也可以逐个列出：

.menu-container:has(.levelFive:hover) .levelOne,
.menu-container:has(.levelFive:hover) .levelTwo,
.menu-container:has(.levelFive:hover) .levelThree,
.menu-container:has(.levelFive:hover) .levelFour {
  display: none;
}

原有代码的问题 #

你之前的代码仅针对.levelFour，通过:has(+ .levelFive)检测它后面是否存在.levelFive，但既没有关联hover状态，也无法选中.levelFour之前的.levelOne/.levelTwo/.levelThree——CSS原生不支持向前选择兄弟元素，必须借助父容器的:has()伪类实现这种“反向选择”逻辑。

浏览器兼容性 #

:has()伪类已被现代主流浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），如果需要兼容旧版浏览器，可能需要JavaScript辅助，但纯CSS方案在现代环境中完全可行。

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