CODEWITHSUNDEEP
csssvgshow-hide
Victor
Victor

Reputation: 41

Using CSS to show/hide an element within an SVG

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>

Upvotes: 4

Views: 5129

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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.

Upvotes: 2

Related Questions