使用 CSS 显示/隐藏 SVG 中的元素

Question

我有一个包含两部分的 SVG 文件。当我将鼠标悬停在 .segment_1 上时，我设法创建了一个悬停状态来更改具有 .segment_1 类的作品的颜色（悬停在 .segment_1 上会改变颜色，该部分有效）。我在同一个 SVG 文件中还有另一个元素，我已经能够使用 CSS 成功隐藏它（#matter）。问题是我似乎无法让名为#matter 的div 也显示为悬停状态。颜色更改有效，但名为 (#matter) 的 div 的显示状态无效。在此先感谢您提供任何帮助。

.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

似乎给我带来问题的代码行是

.segment_1:hover #matter {display:block;}

你是对的。那条 CSS 规则是行不通的。 .segment_1 #matter 表示“.segment_1”的后代，其 id 为“matter”。但是“#matter”不是孩子。它是#matter 父级的兄弟姐妹。

使用纯 CSS 最接近的方法是将悬停伪选择器应用于父级 (#rocket) 并使用兄弟组合器 ("+")

#rocket:hover + #matter {display:block;}

在这里演示：

.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>

这适用于您的示例，但可能不适用于您的真实文件。这意味着将鼠标悬停在火箭的任何子节点上都会显示#matter 元素。

您可能可以通过重新排列 SVG 文件来实现您想要的效果，以便火箭部件和它的弹出窗口是同级的。

.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>

如果您无法做到这一点，那么您将需要求助于 Javascript。