Html Div容器没有'；不要在悬停时更改颜色属性

这是我第一篇关于堆栈溢出的文章，所以我会让它变得简单

我知道我正在为我的IT课程做准备，我有一个相当大的问题

.float1 {
    float:right;
    background-color:#A3635C;
    margin-top: 150px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    transition: 1s;
}

.float1:hover {
    background-color:white;
    color:#A3635C;
}

第二个容器正方形（红色背景）不会更改为

颜色：#A3635C悬停。
文本保持白色

也许有人知道怎么做

谢谢

此规则将覆盖您的悬停颜色规则。不仅您的类（.etc）在CSS规则链中具有较低的优先级，而且颜色也应用于HTML树中的上一个元素（继承树规则总是采用尽可能低的CSS优先级）

要计算规则的“CSS优先级”：

为每个ID（#）添加100
为每个类（.etc）添加10个
为每个元素添加1
也许您可以将“white”更改为CSS类，而不是ID。您也可以有这样或类似的规则：

.float1:hover .white { color: red}

您需要添加

.float1:hover #white{color:#A3635C;}

您的颜色属性为#白色，您需要覆盖它，因为它不会从其父项继承颜色更改：）

你也可以这样简化它

只需将#白色属性添加到.float1

.float1 {
    color:white;
    font-family:'Lobster Two', cursive;
    font-size:400%;
    float:right;
    background-color:#A3635C;
    margin-top: 150px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    transition: 1s;
}

您的
#white
选择器比
强。float1:hover
更改为
#white:hover
或类似的东西，因为您将颜色直接应用于
元素，所以需要使用该元素而不是父元素更改颜色

现在，你有：

.float1:hover{background-color:white;color:#A3635C;}

但这不起作用，因为颜色样式应用于
#white
，而不是
。float1

将其更改为：

.float1:hover{background-color:white;}
.float1:hover p#white {color:#A3635C;}

颜色就会生效

编辑：
div中的段落标记的字体颜色设置为白色。它优先于类中的样式float1。。。。具体来说，它是由
id
选择器设置的，因此它优先于类。
.float1 {
    color:white;
    font-family:'Lobster Two', cursive;
    font-size:400%;
    float:right;
    background-color:#A3635C;
    margin-top: 150px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    transition: 1s;
}

.float1:hover{background-color:white;color:#A3635C;}

.float1:hover{background-color:white;}
.float1:hover p#white {color:#A3635C;}