Using CSS to show/hide an element within an SVG - css

Question

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.
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
#matter {display: none;}
.segment_1:hover #matter {display:block;}
<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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<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"/>
</g>
<g id="matter">
<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"/>
</g>
</svg>

Answer 1

The line of code that seems to be giving me the problem is
.segment_1:hover #matter {display:block;}
You are correct. That CSS rule is not going to work. .segment_1 #matter means "the descendant of ".segment_1" which has the id 'matter'". But "#matter" is not a child. It is the sibling of #matter's parent.
The nearest you can get with pure CSS is apply the hover pseudo-selector to the parent (#rocket) and use the sibling combinator ("+")
#rocket:hover + #matter {display:block;}
Demoed here:
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
#matter {display: none;}
#rocket:hover + #matter {display:block;}
<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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<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"/>
</g>
<g id="matter">
<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"/>
</g>
</svg>
This works for your sample, but may not work for your real file. It'll mean that hovering over any child of the rocket will display the #matter element.
You will probably be able to achieve what you want by rearraging the SVG file so that the rocket part and it's popup are siblings.
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
.popup {display: none;}
.segment:hover .popup {display:block;}
<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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<g class="segment">
<path id="segment_x5F_1" class="st0" 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"/>
<path class="st1 popup" 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"/>
</g>
</g>
</svg>
If you are unable to do that, then you will need to resort to Javascript.