W3CSS水平导航栏：hover父div时同步改变按钮样式问题

直接给你改好的代码和思路：

你之前的问题核心是：按钮的hover样式仅在鼠标触碰按钮文本区域时触发，而父div的hover仅能改变自身背景。要实现父容器整个区域悬停时，按钮和父容器同步变更样式，需要借助CSS后代选择器，在父容器悬停时主动控制按钮的样式。

修改后的完整代码 #

HTML部分

<div style="width: 25%; font-family: 'Roboto Mono'; font-size: 28px;" class="w3-dropdown-hover w3-blue">
    <button style="width: 100%;" class="w3-button w3-mobile w3-blue w3-text-yellow">LORE</button>
    <div style="width:25%" class="w3-dropdown-content w3-bar-block">
        <a href="GeneralLorePage.html" class="w3-bar-item w3-button w3-text-yellow w3-blue w3-hover-green">General Lore</a>
    </div>
</div>

自定义CSS（放在页面<style>标签或外部样式表中）

/* 父容器悬停时，修改自身背景色 */
.w3-dropdown-hover:hover {
    background-color: #4CAF50 !important; /* 和W3CSS的w3-green颜色一致 */
}

/* 父容器悬停时，同步修改内部按钮的背景色 */
.w3-dropdown-hover:hover .w3-button {
    background-color: #4CAF50 !important;
}

关键细节说明 #

1. 我把按钮宽度改成了100%，让按钮填满父容器宽度，视觉上更统一；如果需要保留原25%宽度也可以，只是悬停父容器空白区域时按钮样式依然会同步变化。
2. 移除了按钮上的w3-hover-green类，避免和自定义的父容器悬停样式冲突。
3. 用!important是为了覆盖W3CSS自带类的样式优先级，确保自定义样式能生效。
4. 关于你疑惑的「带空格的W3CSS类名」：那些空格是多个独立类的分隔符，比如w3-dropdown-hover和w3-blue是两个单独的类，选择时直接使用单个类名即可，比如.w3-dropdown-hover:hover就是选中处于悬停状态的父容器，再通过后代选择器.w3-button选中内部的按钮。

这样修改后，不管鼠标悬停在父容器的哪个区域（包括按钮和空白处），父容器和按钮的背景都会同步变成绿色，完全符合你的需求。

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