鼠标悬停后置元素时修改前置元素CSS属性的无JS实现方案

这确实是CSS里一个挺常见的痛点——咱们CSS的选择器只能往后选兄弟元素，没法直接选中前面的。不过不用慌，现在有两种不用JavaScript的办法能解决，看你的需求来选：

方法1：用CSS :has() 选择器（推荐，现代浏览器友好） #

has()是CSS的父选择器，它能让我们根据子元素的状态来选中父元素，进而控制其他子元素。这个方案完全不用改你的DOM结构，代码逻辑也特别直观：

.box, .box-2 { 
  display: block; 
  height: 100px; 
  width: 100px; 
  margin: 20px; 
}
.box { background-color: red; }
.box-2 { background-color: blue; }

/* 当wrapper里的.box-2被hover时，修改.box的颜色 */
.wrapper:has(.box-2:hover) .box {
  background-color: green;
}

<body>
  <div class="wrapper">
    <div class="box"></div>
    <div class="box-2"></div>
  </div>
</body>

这个方案的好处就是完全保留你原本的DOM结构和视觉布局，写起来也省心。需要注意的是，has()现在已经被Chrome 105+、Firefox 121+、Safari 15.4+这些现代浏览器支持，如果你的项目需要兼容更老的浏览器，可以看看下面的方法。

方法2：利用Flex的order属性调整视觉顺序（兼容旧浏览器） #

要是得支持不兼容has()的旧浏览器，咱们可以换个思路：调整DOM里元素的顺序，让.box-2放在.box前面，然后用Flex的order属性保持原来的视觉排列（.box在上，.box-2在下），这样就能用兄弟选择器来控制样式了：

.wrapper {
  display: flex;
  flex-direction: column;
}
.box, .box-2 { 
  display: block; 
  height: 100px; 
  width: 100px; 
  margin: 20px; 
}
.box { 
  background-color: red;
  order: 2; /* 让.box在视觉上排在后面 */
}
.box-2 { 
  background-color: blue;
  order: 1; /* 让.box-2在视觉上排在前面 */
}

/* 现在.box-2是.box的前序兄弟，hover时就能用~选择器控制.box了 */
.box-2:hover ~ .box {
  background-color: green;
}

<body>
  <div class="wrapper">
    <!-- 交换DOM里的元素顺序 -->
    <div class="box-2"></div>
    <div class="box"></div>
  </div>
</body>

这个方法通过调整DOM顺序和Flex的order属性，绕开了CSS不能选择前置兄弟的限制，能兼容到IE11这类比较旧的浏览器。

总结一下 #

• 不用兼容旧浏览器的话，优先选has()方案，代码简洁还不用改DOM；
• 要兼容旧浏览器的话，就用Flex order的方案，稍微调整下DOM结构就能搞定。

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