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

Question

我的所有类别都显示在带有蓝色 icons/text 的白色 DIV 中。我想在鼠标悬停时反转颜色，使背景变成蓝色，icons/text 变成白色。

<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> 里面，它会带颜色。

Answer 2

你能试试下面的代码吗

<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>

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

Invert colours with CSS on mouse over

html

css

colors

mouseover