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>内，所以它会采用这种颜色。

Answer 2

请试试下面的代码

br+

鼠标悬停时用CSS反转颜色

2 个答案: