如何使用 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;
}

在样式表中，但它们都没有出现在检查器中。我会在样式表中只尝试 a:hover （在它之前没有类），但当然这将适用于所有超链接。当您将鼠标悬停在社交媒体链接上时，如何仅对其进行样式设置？谢谢！

Answer 1

方块在<a> 标签内，而不是像您尝试做的那样。您的 CSS .fa a:hover 应用于 .fa 内的 <a>，这是正方形的类。

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

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

或者当然是一样的，但是使用类选择器而不是标签：

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

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

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

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