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上时才将bottom red颜色更改为白色，而不是鼠标移到item的其他部分时。

请帮忙！

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

Answer 2

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

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

将鼠标悬停在父div CSS

2 个答案: