Fill SVG on parent div hover (no JS) - html

Question

I have 2 SVG paths and I would like them to change fill color when users rollover their parents did. I can get the hover working but only when users hover on the svg. I know it is easy with JS but I would prefer to stick with 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;
}
Demo: http://jsfiddle.net/69g7K/

Answer 1

We can do this, by using parent:hover as selector to vary the CSS attributes of child1 and child2 which are within their respective parents..
Use the following for the CSS :
.button:hover .svg1{
fill:blue;
}
.button:hover .svg2{
fill:yellow;
}
Demo : jsFiddle

Answer 2

here is a trick if you have a more complex svg element, for instance if you have multiple paths, do the following:
<div class="your-class">
<svg [svg content...]
<path ...>
<path ...>
<path ...>
</div>
use css to look for paths not only something inside a specific path:
.your-class{
/* code without rover */
transition: 0.3s ease-in-out;
}
.your-class:hover path{
stroke: #C4C4C4; /* use stroke to color svg lines*/
/* use fill to color the inside */
also (maybe worth mentioning) if you your div to be only around the svg you can use the width: fit-content; for your div
hope it helps you out

Answer 3

svg {
fill: #444;
}​
just add a class to each SVG and use the css above something like this:
svg.svg1:hover {
fill: #666;
}​
svg.svg2:hover {
fill: #666;
}​
remove style="fill: yellow" for example from each SVG path otherweise it will overwrite your css
<svg class=svg1 width=150px height=150px>
<circle cx=64 cy=64 r=20>
</svg>
<svg class=svg2 width=150px height=150px>
<circle cx=64 cy=64 r=20>
</svg>
Demo:http://jsfiddle.net/GwWk5/
svg {
fill: red;
}
svg.svg1:hover {
fill: blue;
}
svg.svg2:hover {
fill: green;
}