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

Question

在我正在开发的网站 http://www.stefaanoyen.be 的页脚中，有3个带有文本前箭头的按钮。箭头是一个图标字体，并且我希望当鼠标悬停在按钮上时，箭头（以及按钮文本）的颜色会改变。

您有什么想法吗？

这是我的html代码：

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

这是button:hover的CSS：

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

这是底部菜单列表的CSS：

.footerlist:hover {
color: #ddd;
 }

- Stefaan

---

那么如果鼠标悬停在按钮上，箭头应该改变吗？ - aNewStart847

将箭头直接放入 Vrag offerte 的 span 标签中。 - btevfik

Answer 1

最简单的方法是通过以下方式来在按钮悬停时定位图标颜色：

```css button:hover .icon { color: #yourcolorcode; } ```

.footerButton:hover .footerlist {
   color: #ddd;
}

- dsgriffin

---

@Stefaan 很高兴听到这个消息！如果它起作用了，请随意点赞/接受答案 :) 很高兴它能够正常工作。 - dsgriffin

如果您在悬停时更改按钮背景颜色，同时仍然保持更改图标颜色，您会如何操作？ - Alex

Answer 2

这应该可以工作：

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

- aNewStart847