html - 在鼠标悬停时使用 CSS 反转颜色

Question

我的所有类别都显示在带有蓝色图标/文本的白色 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>

我的背景工作没有任何问题，但我不确定如何将白色应用于 fa 图标或跨度文本。我知道这必须很简单，但无法完全弄清楚。我现在的 CSS 是...

.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;
    color: #fff;
}

Answer 1

更新:

您在 <i> 中定义了一个内联样式.这是所有问题的根本原因:

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

天哪，没看到。你需要给!important喜欢:

.catbox:hover a i {
  background-color: #337ab7;
  color: #fff !important;
}

!important的使用很是泄气。所以使用:

.catbox a i {
  color: #337ab7;
}
.catbox:hover a i {
  background-color: #337ab7;
  color: #fff;
}

并更改您的 HTML 以完全删除内联样式:

<a href="#"><i class="fa fa-cloud fa-3x"></i></a>

---

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

.catbox:hover a {
  background-color: inherit;
  color: inherit;
}

或者更好的是，保持它像以前一样:

.catbox:hover,
.catbox:hover a {
  background-color: #337ab7;
  color: #fff;
}

自 <i>在里面<a> , 它会带颜色。