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

【问题标题】：Invert colours with CSS on mouse over鼠标悬停时使用 CSS 反转颜色
【发布时间】：2017-05-22 00:04:11
【问题描述】：

我的所有类别都显示在带有蓝色图标/文本的白色 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 图标或 span 文本。我知道这必须很简单，但不能完全弄清楚。我现在的 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;
}

【问题讨论】：

标签： html css colors mouseover

【解决方案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> 里面，所以它会带颜色。

【讨论】：

它适用于
Clouds
，但不适用于图标或“4 个列表”文本。 HTML 标记中指定的样式是否会覆盖样式表中的样式？
@BrettPowell 看起来像。您能否分享完整的演示，以便我们可以找到真正覆盖它的内容？
@BrettPowell 您在<i> 中定义了一个内联样式。天哪，没看到。您需要提供!important 就像我在答案中的更新方式一样。
@BrettPowell 我也在以更好的方式更新答案。请检查。
根据你上面的建议更新了，谢谢！

【解决方案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>

【讨论】：