图标颜色不随:hover变化是因为未继承父元素文本颜色，解决方法是使用currentColor让图标颜色绑定父级color属性，从而在hover时自动同步变色。
在使用 CSS 的 :hover 伪类时，如果图标颜色没有按预期改变，很可能是图标的颜色未正确继承父元素的文本颜色。通过使用 currentColor 可以轻松解决这个问题，让图标自动继承父级的文字颜色，并在 hover 时动态变化。
为什么图标颜色不随:hover变化？
很多图标（如 SVG 内联图标、字体图标或 background-image 图标）默认颜色是固定的，比如设置为黑色或通过 fill/stroke 明确指定颜色值。这种情况下，即使父元素的 color 改变，图标也不会响应。
解决方法就是：用 currentColor 作为图标的颜色值，它会自动读取父元素的 color 属性。
使用 currentColor 绑定图标颜色
将图标的颜色设为 currentColor，这样它就能跟随父元素文字颜色变化，包括 hover 状态。
立即学习“前端免费学习笔记（深入）”；
示例：SVG 图标跟随文本颜色
<a href="#" class="nav-link">
<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0L6 6H0l4.5 3.5L6 16l6-6h6l-4.5-3.5L18 0z"/>
</svg>
<span>收藏</span>
</a>
CSS 样式：
.nav-link {
color: #333;
text-decoration: none;
}
.nav-link:hover {
color: #007acc;
}
由于 SVG 的 fill="currentColor"，图标颜色会随着父链接的 color 在 hover 时变为 #007acc。
适用于其他场景
除了 SVG 的 fill，以下属性也可以使用 currentColor：
-
stroke：用于描边路径 -
border-color：让边框跟随文字色 -
background-color：较少用，但某些情况可用
例如按钮带图标的场景：
.btn {
color: green;
border: 2px solid currentColor;
padding: 10px;
}
.btn:hover {
color: red;
}
按钮文字和边框都会在 hover 时变为红色。
基本上就这些。只要把图标的颜色来源设为 currentColor，再控制父元素的 color，hover 变色就能自然生效，无需 JavaScript 或额外类名切换。这个技巧简洁高效，适合大多数图标颜色同步场景。
