鼠标悬浮symbol系列id的div时，如何修改#bg的背景色？求助

你之前的CSS代码失效的核心原因是：#symbol1~4是#container的子元素，和#bg不属于同一层级。CSS的兄弟选择器（~/+）只能选中与当前元素同级的后续元素，所以无法直接通过子元素的hover状态控制外部的#bg。

下面提供两种可行的解决方案：

方案一：使用CSS :has() 选择器（现代浏览器支持） #

利用:has()选择器检测父容器#container内是否有symbol元素处于hover状态，再通过兄弟选择器控制同级的#bg：

/* 悬浮任意symbol时，统一设置bg背景色为红色 */
#container:has(#symbol1:hover),
#container:has(#symbol2:hover),
#container:has(#symbol3:hover),
#container:has(#symbol4:hover) ~ #bg {
    background-color: red;
}

如果需要每个symbol对应不同背景色，可以单独配置：

#container:has(#symbol1:hover) ~ #bg { background-color: red; }
#container:has(#symbol2:hover) ~ #bg { background-color: blue; }
#container:has(#symbol3:hover) ~ #bg { background-color: green; }
#container:has(#symbol4:hover) ~ #bg { background-color: yellow; }

方案二：JavaScript方案（兼容所有浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JS绑定事件更稳妥：

// 获取目标元素
const symbols = document.querySelectorAll('#symbol1, #symbol2, #symbol3, #symbol4');
const bg = document.getElementById('bg');

// 绑定鼠标进入事件
symbols.forEach(symbol => {
    symbol.addEventListener('mouseenter', () => {
        // 根据symbol的id设置对应背景色
        switch(symbol.id) {
            case 'symbol1':
                bg.style.backgroundColor = 'red';
                break;
            case 'symbol2':
                bg.style.backgroundColor = 'blue';
                break;
            case 'symbol3':
                bg.style.backgroundColor = 'green';
                break;
            case 'symbol4':
                bg.style.backgroundColor = 'yellow';
                break;
        }
    });

    // 绑定鼠标离开事件，恢复默认样式
    symbol.addEventListener('mouseleave', () => {
        bg.style.backgroundColor = '';
    });
});

内容的提问来源于stack exchange，提问作者João Pires