在父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/

Answer 1

我们可以做到这一点,利用parent:hover作为选择改变的CSS属性child1和child2它们各自的父母之内..

对CSS使用以下内容:

.button:hover .svg1{
    fill:blue;
}

.button:hover .svg2{
    fill:yellow;
}

演示:jsFiddle