title: Using CSS to show/hide an element within an SVG
body: <p>I've got an SVG file with two parts to it. I've managed to create a hover state to change the color of the piece with a class of .segment_1 when I hover over it, (hovering over .segment_1 changes the color, that part works). I also have another element in the same SVG file that I've been able to hide successfully using CSS, (#matter). The problem is that I can't seem to get the div named #matter to also show with the hover state. The color change works but the show state of the div named (#matter) does not. Thanks in advance for any help on this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.segment_1 {fill:#a1a1a1;}
  .segment_1:hover {fill:#F9A92F;}
      
  #matter {display: none;}
      
  .segment_1:hover #matter {display:block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="rocket_x5F_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#E6E7E8;}
       .st1{fill:#F9AA30;}
      &lt;/style&gt;
      &lt;g id="rocket"&gt;
       &lt;path id="segment_x5F_1" class="st0 segment_1" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65
        c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/&gt;
      &lt;/g&gt;
      &lt;g id="matter"&gt;
       &lt;path class="st1" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4
        C288.2,72.2,283.8,76.7,278.4,76.7z"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>