悬停效果影响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

在我发布问题后立即找到answer on SO ...

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

所以这对我有用：

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