如何实现hover后序同级元素时影响前置同级元素？代码问题排查

你写的.child-b:hover + .child-a不生效，是因为CSS的相邻兄弟选择器(+)只能选中当前元素之后的同级元素，而你的HTML里child-a在child-b前面，所以这个选择器根本匹配不到目标元素。

方法1：调整HTML结构（配合CSS保持视觉顺序） #

如果允许修改HTML结构，可以把child-b放到child-a前面，再用CSS的flex order属性调整视觉显示顺序，这样就能用兄弟选择器实现效果：

修改后的HTML #

<div class="parent">
    <div class="child-b">B</div>
    <div class="child-a">A</div>
</div>

补充CSS #

.parent {
    display: flex;
    flex-direction: column;
}
/* 调整显示顺序，让A在视觉上排在B前面 */
.child-a {
    order: 1;
}
.child-b {
    order: 2;
}

/* 现在hover B时，就能选中后面的A了 */
.parent .child-b:hover,
.parent .child-b:hover + .child-a {
    background-color: black;
}

方法2：使用CSS :has()选择器（无需改HTML） #

:has()是CSS新增的父选择器，能直接选中包含child-b:hover的父元素，再通过父元素控制child-a：

修改后的CSS #

.child-a,
.child-b {
    height: 200px;
    width: 200px;
}

.child-a {
    background-color: brown;
}

.child-b {
    background-color: blue;
}

/* 当父元素包含hover状态的child-b时，修改child-a的样式 */
.parent:has(.child-b:hover) .child-a,
.parent .child-b:hover {
    background-color: black;
}

注意：:has()目前支持Chrome、Firefox（需开启相关设置）、Safari等现代浏览器，IE完全不支持。

方法3：JavaScript实现（兼容性最好） #

如果需要兼容旧浏览器，用JS监听鼠标事件来动态修改样式：

新增JS代码 #

const childB = document.querySelector('.child-b');
const childA = document.querySelector('.child-a');

// 鼠标进入B时，给A加样式类
childB.addEventListener('mouseenter', () => {
    childA.classList.add('hovered');
});

// 鼠标离开B时，移除A的样式类
childB.addEventListener('mouseleave', () => {
    childA.classList.remove('hovered');
});

补充CSS #

/* 新增hover状态的样式类 */
.child-a.hovered {
    background-color: black;
}

/* 保留原有的B的hover样式 */
.parent .child-b:hover {
    background-color: black;
}

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