如何使用CSS悬停样式特定元素？

Question

这个问题适用于http://chameleonwebsolutions.com。我需要它，以便当您将鼠标悬停在社交媒体链接上时，它们的颜色会变为更深的绿色（＃72984a）。我试过了：

.site-header .fa a:hover {
color: #72984a !important;
}

.fa .fa-facebook-square a:hover {
color:#72984a !important;
}

.social-icons a:hover {
color:#72984a !important;
}

.logo .mobile-social-icons .hidden-tablet a:hover {
color:#72984a !important;
}

.social-icons .hidden-mobile .responsive-header-gutter a:hover {
color: #72984a !important;
}

在样式表中，但没有一个显示在检查器中。我会尝试一下：将鼠标悬停在样式表中（之前没有类），但当然这将适用于所有超链接。当您将鼠标悬停在社交媒体链接上时，我怎样才能设置其样式？谢谢！

Answer 1

正方形在<a>标签内，而不是像你想要的那样。您的CSS .fa a:hover适用于<a>内的.fa，这是广场的类。

问题是绿色应用于方格<i>而非<a>。我无法测试你的代码，但试试这个：

.social-icons i:hover {
    color: #72984a;
}

当然这是相同的，但使用类选择器而不是标记：

.social-icons .fa:hover {
    color: #72984a;
}

但是，如果您想要遵循现有的CSS方式，请使用：

.site-header .fa:hover {
    color: #72984a;
}

在所有情况下，请始终尝试应用正确的样式，并避免使用!important。