Question

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

Equality

.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
    
#matter {display: none;}
    
.segment_1:hover #matter {display:block;}

Answer 1

似乎给我问题的代码行是
.segment_1:hover #matter {display:block;}

你是对的。 CSS规则不起作用。 .segment_1 #matter表示“.segment_1”的后代，其中“id'为'''。但“#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。

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

1 个答案: