CSS adjacent sibling selector(相邻兄弟选择器)hover样式不生效问题

你的悬停样式不生效，核心原因是CSS相邻兄弟选择器+的匹配逻辑和当前DOM结构不匹配：

• +选择器的作用是选中紧跟在指定元素后方的同级元素，要求目标元素必须在触发元素的DOM节点之后，二者为同级关系。
• 你当前的HTML结构中，.container-1是排在.container前面的同级元素，.container:hover + .container-1这个规则完全匹配不到任何元素，自然不会触发显示效果。
• 补充说明：你当前的CSS代码优先级没有问题，.container:hover + .container-1的优先级高于单独的.container-1规则，不是样式覆盖导致的失效。

二选一即可：

方案1：调整DOM顺序（全浏览器兼容，推荐） #

调换两个div的先后位置，让.container-1紧跟在.container后方，满足+选择器的匹配要求。如果需要视觉上仍然保持.container-1在上方显示，可以通过flex布局的order属性调整视觉顺序，不影响DOM匹配逻辑。
修改后的HTML代码：

<div class="container">
    <div class="w3-light-grey" id="bar">
        <div class="w3-orange" style="height: 18px;width:75%"></div>
    </div> 
    <div class="box-1">
        <p>
            <span>
                <b style="color:orange;">Only 3 days left</b> to fund this project
            </span><br>
            <span>
                Join the <b>42</b> other donors who have already supported this project. Every dollar helps.
            </span>
        </p>
        <div>
            <input type="text" class="field">
            <input type="button" class="btn" value="Give Now"><br>
            <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
        </div>
    </div>
</div>
<div class="container-1">
    <p><b>$167</b> still needed for this project</p>
</div>

如果需要让.container-1视觉上显示在.container上方，给二者的共同父元素（比如body）添加如下样式即可：

body {
    display: flex;
    flex-direction: column;
}
.container-1 {
    order: -1;
}

原有hover样式无需修改即可正常生效。

方案2：使用:has()伪类（无需改动DOM，适配现代浏览器） #

如果不想调整HTML结构，可以使用CSS:has()伪类改写悬停规则，不需要考虑元素的前后顺序，直接匹配.container被hover时的.container-1元素。
把原有hover样式替换为如下代码即可：

body:has(.container:hover) .container-1 {
    display: block;
    color: blue;
}

该方案兼容Chrome 105+、Firefox 121+、Safari 15.4+及以上版本的现代浏览器。

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