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

在样式表中，但 none 显示在检查器中。我会尝试在样式表中只使用 a:hover（前面没有 class），但当然这将适用于所有超链接。当您将鼠标悬停在社交媒体链接上时，我如何才能只设置社交媒体链接的样式？谢谢！

Answer 1

方块位于 <a> 标签内，而不是像您尝试做的那样相反。您的 CSS .fa a:hover 适用于 .fa 内的 <a>，这是正方形的 class。

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

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

或者当然这是相同的，但使用 class 选择器而不是标签：

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

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

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

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

如何在 CSS 悬停时设置特定元素的样式？

How to Style Specific Element On Hover With CSS?

html

css

wordpress

hyperlink

hover