如何在鼠标悬停于后置元素时修改前置指定元素的CSS样式？

你当前使用的相邻兄弟选择器+仅能选中紧跟在触发hover元素后方的同级元素，因此悬停在位于.Dividor之前的.FirstDiv可以生效，但是悬停在位于.Dividor之后的.SecondDiv时，无法通过相邻兄弟选择器选中位于它前方的.Dividor元素。

以下是两种可行的调整方案： #

方案1：父级 hover 匹配（最简单，兼容性最好） #

直接利用父容器的hover状态做判断，只要鼠标悬停在父容器内且没有悬停在.Dividor本身时，就修改.Dividor的透明度：

.base:hover > .Dividor:not(:hover) {
  opacity: 0;
}

这个方案不需要针对两个子元素分别写规则，只要是父容器内除了.Dividor之外的区域被悬停都会触发，完全满足需求。 #

方案2：单独匹配两个子元素的hover状态（逻辑更明确） #

如果需要严格限制只有悬停在.FirstDiv和.SecondDiv时才触发效果，可以用以下写法：

/* 匹配悬停FirstDiv时，后续同级的Dividor元素 */
.FirstDiv:hover ~ .Dividor {
  opacity: 0;
}

/* 匹配父容器包含悬停状态的SecondDiv时，容器内的Dividor元素 */
.base:has(> .SecondDiv:hover) > .Dividor {
  opacity: 0;
}

注意：:has()选择器在2023年之后的主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）都已支持，如果需要兼容更早版本的浏览器，优先使用方案1即可。

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