Html 在鼠标上方使用CSS反转颜色

我的所有类别都以白色div显示，上面有蓝色图标/文本。我想反转鼠标上方的颜色，使背景为蓝色，图标/文本为白色

<div class="col-md-3 col-sm-4">
    <div class="catbox">
        <a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a>
        <a href="#"><h4>Clouds</h4></a>
        <span style="color: #aaa;">4 Listings</span>
    </div>
</div>

---

更新：

您有一个在

中定义的内联样式。这是所有问题的根本原因：

<a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a>
<!-- ------------------------------------^^^^^^^^^^^^^^^^^^^^^^

使用

！重要信息

非常不鼓励。因此，请使用：

.catbox a i{
颜色：#337ab7；
}
.catbox:将鼠标悬停在a i上{
背景色：#337ab7；
颜色：#fff；
}

并更改HTML以完全删除内联样式：

---

对于链接，必须显式继承。添加这行CSS：

.catbox:将鼠标悬停在{
背景色：继承；
颜色：继承；
}

或者更好的办法是，像以前一样：

.catbox:悬停，
.catbox:将鼠标悬停在a上{
背景色：#337ab7；
颜色：#fff；
}

---

由于

在

内部，因此它将采用该颜色。

请尝试使用下面的代码

<div class="col-md-3 col-sm-4">
    <div class="catbox">
        <a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a>
        <a href="#"><h4>Clouds</h4></a>
        <span>4 Listings</span>
    </div>
</div>

<style>

.catbox
{
    background: #fff;
    padding: 25px 10px;
    margin: 25px 0 10px 25px;
    text-align: center;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.catbox:hover
{
    background-color: #337ab7;
    text-decoration: none;
}

.catbox:hover > a
{
    color: #fff !important;
}
</style>

4个列表
.猫箱
{
背景：#fff；
填充：25px 10px；
利润率：25px 0 10px 25px；
文本对齐：居中；
盒影：0.15em0.35em0 rgba（0,0,0,0.135）；
}
.catbox:悬停
{
背景色：#337ab7；
文字装饰：无；
}
.catbox:悬停>a
{
颜色：#fff！重要；
}

它适用于但不适用于图标或“4个列表”文本。HTML标记中指定的样式会覆盖样式表中的样式吗？@BrettPowell看起来像这样。你能分享完整的演示吗？这样我们就可以找到覆盖它的内容了？@BrettPowell你在

中定义了一个内联样式。天哪，我没看见。你需要给出

！重要信息

如我如何更新答案。@BrettPowell我也在以更好的方式更新答案。请检查。根据您的建议进行更新，谢谢！

<div class="col-md-3 col-sm-4">
    <div class="catbox">
        <a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a>
        <a href="#"><h4>Clouds</h4></a>
        <span>4 Listings</span>
    </div>
</div>

<style>

.catbox
{
    background: #fff;
    padding: 25px 10px;
    margin: 25px 0 10px 25px;
    text-align: center;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.catbox:hover
{
    background-color: #337ab7;
    text-decoration: none;
}

.catbox:hover > a
{
    color: #fff !important;
}
</style>