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

Question

我有 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 上而不是鼠标悬停在 [=14 的其他部分上时才将 bottom red 颜色更改为白色=].

请帮忙！

Answer 1

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

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

Answer 2

.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;
}

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

Change color of text when hovering over parent div CSS

html

css

hover