如何修改hover元素上方的同级div样式？CSS兄弟选择器向上选中方案

原因说明 #

这是CSS的固有设计限制，并非代码逻辑错误。CSS中提供的+相邻兄弟选择器、~通用兄弟选择器，都只能匹配当前元素之后出现的同级节点，暂无原生支持前置兄弟匹配的选择器。该设计是为了适配CSS从上到下的DOM流式解析规则，避免向前匹配导致的渲染回流性能损耗。

可行解决方案 #

方案1：使用:has()选择器（推荐，无需修改DOM结构） #

目前大部分现代浏览器已支持:has()父级选择器，你可以直接通过父容器匹配hover状态，选中任意位置的高亮元素：

/* 兼容Chrome 105+、Safari 15.4+、Firefox 121+ */
.parent-container:has(.sibling-hover:hover) .sibling-highlight {
    background-color: red;
    color: white;
}

使用该方案无需调整原有的HTML结构，仅需要给所有兄弟元素的共同父节点加parent-container类即可。

方案2：使用Flex/Grid的order属性调整视觉顺序（兼容性更好） #

如果需要兼容低版本浏览器，可以保持DOM结构中触发hover的元素在高亮元素之前，再通过Flex布局的order属性调换视觉上的显示顺序：

.parent-container {
    display: flex;
    flex-direction: column;
}
.sibling-hover {
    /* 调整为视觉上的第2位 */
    order: 2;
    cursor: pointer;
}
.sibling-highlight {
    /* 调整为视觉上的第1位 */
    order: 1;
}
/* 原有后续兄弟选择器逻辑保持不变 */
.sibling-hover:hover ~ .sibling-highlight {
    background-color: red;
    color: white;
}

对应的HTML结构：

<b>sibling method:</b>
<div class="parent-container">
    <!-- DOM中hover触发元素放在前面 -->
    <div class="sibling-hover">hover over me</div>
    <div class="sibling-highlight">我在视觉上位于hover元素上方，可正常高亮</div>
    <div>I do nothing</div>
    <div>I do nothing</div>
</div>

该方案兼容所有支持Flex布局的浏览器，包括IE11。

方案3：使用JavaScript实现（全版本兼容） #

如果需要兼容极旧版本浏览器，可以通过监听hover事件动态添加/删除高亮类：

.sibling-hover{
    cursor: pointer;
}
.sibling-highlight.active {
    background-color: red;
    color: white;
}

const hoverElement = document.querySelector('.sibling-hover')
const highlightElements = document.querySelectorAll('.sibling-highlight')

hoverElement.addEventListener('mouseenter', () => {
  highlightElements.forEach(el => el.classList.add('active'))
})
hoverElement.addEventListener('mouseleave', () => {
  highlightElements.forEach(el => el.classList.remove('active'))
})

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