CSS hover相邻元素切换属性：需求实现遇阻求解决方案

嘿，这个需求完全可以用纯CSS搞定，不用求助JavaScript~

问题根源 #

你遇到的问题其实是CSS选择器的优先级和状态继承导致的：当鼠标悬停在.secondary（蓝色div）上时，它的父元素.root也同时处于:hover状态，所以你之前写的.root:hover .main样式依然会生效，把绿色div的背景设为绿色，覆盖了你想要的白色。

纯CSS解决方法 #

我们可以用CSS的:has()选择器来精准控制这个场景。:has()是一个非常实用的父选择器，它可以让我们基于子元素的状态来设置父元素下其他子元素的样式。

只需要在你的CSS里添加这一行：

.root:has(.secondary:hover) .main {
  background: white;
}

这个选择器的意思是：当.root元素包含任何一个处于:hover状态的.secondary子元素时，把.main的背景设为白色。它的优先级足够覆盖之前的.root:hover .main样式，因为它是更具体的条件选择。

完整示例代码 #

<style>
.root { 
  border: 1px solid red; 
  width: 300px; 
  height: 100px; 
  display: flex; 
  align-items: center; 
  justify-content: space-around; 
}
.main { 
  border: 1px solid green; 
  width: 50px; 
  height: 50px; 
  background: white; 
}
.secondary { 
  border: 1px solid blue; 
  width: 50px; 
  height: 50px; 
  background: white; 
}
.root:hover { background: red; }
.root:hover .main, .main:hover { background: green; }
.secondary:hover { background: blue; }
/* 新增的关键样式 */
.root:has(.secondary:hover) .main {
  background: white;
}
</style>
<div class="root">
  <div class="main"></div>
  <div class="secondary"></div>
  <div class="secondary"></div>
</div>

兼容性说明 #

:has()选择器现在已经被Chrome、Firefox（121+）、Safari等主流浏览器支持了，如果你的项目不需要兼容非常老旧的浏览器，这个方案完全没问题。如果必须兼容不支持:has()的环境，那才需要考虑用JavaScript来监听鼠标事件，手动切换样式。

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