影响 HTML 链接元素中的 SVG 图标和文本内容的悬停效果

Question

假设我有以下 HTML：

<a href="#">
 <svg class="icon">
 <!-- SVG content -->
 </svg>
 Link text
</a>

以及以下 CSS：

a:hover {
  color: #0074D9;
}

icon:hover {
  fill: #0074D9;
}

现在我想要一个作用于整个组的悬停效果（比如说颜色变化）a。也就是说，当用户将鼠标悬停在元素上时，应该会看到图标和文本颜色都发生变化a。

像这样的东西（来自 Instapaper 网站）：

现在，使用上面的标记和样式规则，我只能在 Chrome 上得到这个：

将鼠标悬停在文本上不会影响图标。将鼠标悬停在图标上会起作用：

似乎是一项微不足道的任务，但经过几次失败的尝试后，我意识到我可能错过了一些东西。

Answer 1

在我发布问题后立即找到了答案......

基本上我需要“设置悬停元素内的图标类的颜色”。

所以这对我有用：

a:hover .icon {
  fill: $0074D9;  
}