将鼠标悬停在父 div CSS 上时更改文本颜色答案

【问题标题】：Change color of text when hovering over parent div CSS将鼠标悬停在父 div CSS 上时更改文本颜色
【发布时间】：2016-03-24 17:12:07
【问题描述】：

我有一个附加了悬停效果的 div。此 div 包含其他 2 个带有文本的 div，带有样式文本颜色。

<div class="item">
    <div class="top">
         test
    </div>
    <div class="bottom red">
        test red
    </div>
</div>

和css：

 .item {
    width: 480px;
    height: 970px;
    background: #cccccc;
    font-size: 60px;
    color:#0073b5;
    text-align: center;
}

.red {
    color:#ff2400;
}

.item:hover {
    background: blue;
    color: #ffffff;
}

.top {
    height: 466px;
}

.bottom {
    padding-top: 85px;
    text-align: center;
}

当我将鼠标悬停在item div 的任何部分时，我需要嵌套 div 中的所有文本将颜色更改为白色。

目前只有top 中的文本会改变颜色，而bottom red 中的文本不会。

我尝试了不同的组合，但最好的方法是仅当鼠标悬停在该 div 上而不是鼠标悬停在 item 的其他部分时才将 bottom red 颜色更改为白色。

请帮忙！

【问题讨论】：

标签： html css hover

【解决方案1】：

.red 将明确覆盖颜色。让你的选择器更强大，例如：

.item:hover > * {
    color: #ffffff;
}
// Other examples
.item:hover > div
.item:hover *
// Or explicitly declare .red too
.item:hover,
.item:hover .red
// As worst solution, you have !important
.item:hover {
    background: blue;
    color: #ffffff !important;
}

【讨论】：

【解决方案2】：

在 CSS 中，最具体的规则胜出。尝试将以下规则添加到您的 CSS。

.item:hover .red {
    color: white;
}

【讨论】：

谢谢，这可行，但必须接受其他更详细的答案。