悬停时更改按钮内的字体图标颜色

Posted 2023-03-06

【中文标题】悬停时更改按钮内的字体图标颜色

【英文标题】：Change font icon color inside button on hover

【发布时间】：2013-03-15 12:28:51

【问题描述】：

在我的网站（开发中）http://www.stefaanoyen.be 的页脚中，文本前有 3 个带有箭头的按钮。箭头是图标字体，我希望它在按钮悬停时改变颜色（按钮文本也是如此）。

知道怎么做吗？

这是我的 html：

<a class="footerbutton"><span class="footerlist">X</span>Vraag offerte</a>

这是按钮：hover css：

a:hover.footerbutton 
background-color: #B61618;
color: #ddd;
border: none;
text-decoration: none;

这是footerlist span class css：

.footerlist:hover 
color: #ddd;
 

【问题讨论】：

如果按钮悬停，箭头应该改变？

用Vrag offerte把箭头放到span中

【参考方案1】：

在悬停按钮内定位图标颜色的最简单方法是像这样定位它：

.footerButton:hover .footerlist 
   color: #ddd;

【讨论】：

@Stefaan 很高兴听到这个消息！如果它有效，请随意投票/接受答案:) 很高兴它有效

如果您像这样进行悬停并且仍然保持更改图标颜色，您将如何更改按钮背景的颜色？

【参考方案2】：

这应该可行：

a:hover.footerbutton:hover .footerlist 
    color: #ddd;