css3是元素不可见,SVG CSS3从其他元素悬停显示和隐藏元素

鉴于下面的SVG，我试图使用CSS来允许用户将鼠标悬停在中的分类元素g#Main_Layer中，以取消隐藏#Hover_Panels中无关的g元素。请看下图：SVG CSS3从其他元素悬停显示和隐藏元素

height="1569.2px" viewBox="0 0 1280 1569.2" style="enable-background:new 0 0 1280 1569.2;" xml:space="preserve">

text{font-family:'Lato';font-weight:300;}

#Hover_Text {

text-transform: uppercase;

}

.st0{fill:#404041;}

.st1{font-family:'Lato';font-weight:300;}

.st5{font-family:'Lato';font-weight:400;}

.st6{font-size:20px;}

.st7{fill:none;stroke:#5880AC;stroke-width:1.073;}

.st22{display:none;}

.st23{display:inline;fill:#016699;}

.st24{font-size:26.44px;}

.hovertext {

cursor: pointer;

}

.hovertext:hover {

font-weight: bold;

}

.hovertext:hover + #Hidden_Text {

display: block;

}

hover

HOVER TEXT

Default Text

Hidden Text

的问题是，我不完全在(我们的设计师提供的插图产生多数民众赞成)的XML布局的太多的控制，以及原因，我希望我能在这里讨论，我们不能用JavaScript来完成这种效果。

如何在使用CSS时悬停在.hovertext元素上，将display: block添加到#Hidden_Text元素，并隐藏#Default_Text元素？

谢谢！

+0

只有CSS才能达到此目的 - 您可以在悬停时更改子元素的状态，而不是父级或兄弟级别。 –