悬停效果

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; 
}