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

Posted 2023-03-06

【中文标题】如何使用 CSS 在悬停时设置特定元素的样式？

【英文标题】：How to Style Specific Element On Hover With CSS?

【发布时间】：2016-11-11 14:15:57

【问题描述】：

这个问题是针对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 （在它之前没有类），但当然这将适用于所有超链接。当您将鼠标悬停在社交媒体链接上时，如何仅对其进行样式设置？谢谢！

【参考方案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。

【讨论】：

不知道你可以设置样式：i 链接的悬停状态 - 它有效，谢谢！