Question

这是我关于堆栈溢出的第一篇文章，所以我会这么简单。

我正在为我的IT课程制作this little page，而且我遇到了很多问题。

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

第二个容器方块（红色背景）在悬停时不会更改为color: #A3635C;。文字仍然是白色的。

也许有人知道如何使这项工作？

由于

Answer 1

#white{color:white;font-family: 'Lobster Two', cursive;font-size:400%;}

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

计算规则＆＃34; CSS优先级＆＃34;：

为每个ID添加100（＃）
为每个班级（.etc）添加10个
为每个元素添加1

也许你可以改变＆＃34; white＆＃34;是一个CSS类，而不是一个ID。你也可以有这样的规则，或类似的规则：

.float1:hover .white { color: red}

Answer 2

因为您的颜色直接应用于<p>元素，所以您需要使用该元素而不是父元素更改颜色。

现在，你有：

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

但由于颜色样式适用于#white，而不是.float1

，因此不起作用

将其更改为：

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

并且颜色将生效。

编辑： Updated the CodePen

Answer 3

您需要添加

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

你有#white的颜色属性，你需要覆盖它，因为它不会从它的父级继承颜色变化：）

您也可以像http://codepen.io/anon/pen/zeuAk

一样简化它

<div class="float1">
  <p>Because Color<br>Matters</p>
</div>

然后按原样使用悬停

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

只需将#white属性添加到.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;
}

Answer 4

您的#white选择器强于.float1:hover更改为#white:hover或类似内容

Div容器在悬停时不会更改颜色属性

4 个答案: