Angular图标如何实现鼠标悬停变色？

在Angular应用中，如何让图标在鼠标悬停时改变颜色？

许多Angular项目都用到图标，而鼠标悬停时改变图标颜色能提升用户体验。本文将讲解如何实现这一效果。

核心在于CSS的color属性和hover伪类。图标本身可能已定义颜色，或继承父元素颜色。通常，hover样式应用于父元素，而非图标元素本身。

因此，最佳实践是使用选择器xxx:hover 图标 { color: xxx }。例如，若图标位于类名为icon-container的元素内（假设图标元素为），CSS代码如下：

.icon-container:hover > i {
  color: blue;
}