title: Fill SVG on parent div hover (no JS)
body: <p>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. </p>
  
  <pre><code>&lt;div class="button"&gt;
     &lt;svg width="100px" height="100px"&gt;
         &lt;circle cx="30" cy="30" r="20" style="stroke: black;"/&gt;
     &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="button"&gt;
     &lt;svg width="100px" height="100px"&gt;
         &lt;circle cx="30" cy="30" r="20" style="stroke: black;"/&gt;
     &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.button{
      background-color:gray;
      margin-bottom: 20px ;
  }
  
  svg{
      fill:green;
  }
  
  svg:hover{
      fill:blue;
  }
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/69g7K/" rel="nofollow">http://jsfiddle.net/69g7K/</a></p>