Question

目前HTML看起来像这样：

    <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                <p><a class="email" href="mailto:your-email@your-domain.com" style="color: #ffffff; hover:#006b33">sales@higherpromos.com</a></p>
            </div>

我的CSS看起来像这样：

    .col-lg-4 text-center a.email:hover {
color: #006b33;

}

我无法弄清楚我做错了什么？有什么建议吗？

Answer 1

要更改悬停颜色，您必须在正确的CSS样式中更改它。但是要将它仅应用于一个特殊元素，您需要创建一个特殊类或将其映射到id。请注意，您必须在CSS中声明标准颜色，否则它将无法正常工作。

按班级分类：

＆＃13;

.email {
  color: #ffffff;
}
.specialColor:hover {
  color: #006b33;
}

＆＃13;

<a class="email specialColor" href="#" style="">LINK</a>

＆＃13;

按Id：

＆＃13;

.email {
  color: #ffffff;
}
#specialColor:hover {
  color: #006b33;
}

＆＃13;

<a id="specialColor" class="email" href="#">LINK</a>

＆＃13;

Answer 2

您正在将样式直接应用于锚点。这种风格优先于你的其他风格。您可以使用以下样式：

.text-center a.email {
    color: #fff;
}
.text-center a.email:hover {
    color: #006b33;
}

并像这样更改你的HTML：

<div class="col-lg-4 text-center">
    <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
    <p><a class="email" href="mailto:your-email@your-domain.com">sales@domain.com</a></p>
</div>

： - ）

Answer 3

您没有正确组合选择器。

git push

这是荒谬的，因为您要求的是一个名为git push的元素，它不是一个有效的元素。在这种特殊情况下，您要使用：

.col-lg-4 text-center a.email:hover

选择器的text-center部分正在组合两个类名（选择应用了两个.col-lg-4.text-center a.email:hover和.col-lg-4.text-center的元素。但它可能不是必需的。一般情况下。你希望你的选择器尽可能不具体。

我可以使用哪些CSS来更改单个链接的颜色而不更改其他链接？

3 个答案: