html - 親 div ホバーで SVG を塗りつぶす (JS なし)

Question

2 つの SVG パスがあり、ユーザーが親をロールオーバーしたときに塗りつぶしの色を変更したいと考えています。ホバーを機能させることができますが、ユーザーが svg にホバーした場合のみです。JS で簡単なのはわかっていますが、CSS に固執したいと思います。

<div class="button">
   <svg width="100px" height="100px">
       <circle cx="30" cy="30" r="20" style="stroke: black;"/>
   </svg>
</div>

<div class="button">
   <svg width="100px" height="100px">
       <circle cx="30" cy="30" r="20" style="stroke: black;"/>
   </svg>
</div>

CSS:

.button{
    background-color:gray;
    margin-bottom: 20px ;
}

svg{
    fill:green;
}

svg:hover{
    fill:blue;
}

デモ: http://jsfiddle.net/69g7K/