懸停效果

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