鉴于下面的SVG,我试图使用CSS来允许用户将鼠标悬停在中的分类元素g#Main_Layer
中,以取消隐藏#Hover_Panels
中无关的g
元素。请看下图:SVG CSS3从其他元素悬停显示和隐藏元素
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1280px"
height="1569.2px" viewBox="0 0 1280 1569.2" style="enable-background:new 0 0 1280 1569.2;" xml:space="preserve">
<style type="text/css">
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;
}
</style>
<g id="Main_Layer">
<text id="Hover_Text" transform="matrix(1 0 0 1 1044.0001 878.011)">
<tspan x="0" y="0" class="st4 st5 st6">hover </tspan>
<tspan x="0" y="180" class="hovertext st4 st1 st6">HOVER TEXT</tspan>
</text>
</g>
<g id="Hover_panels">
<g id="Default_Text" >
<text transform="matrix(1 0 0 1 459.2306 1051.639)">
<tspan x="0" y="0" class="st16 st1 st19">Default Text </tspan>
</text>
</g>
<g id="Hidden_Text" class="st22">
<text transform="matrix(1 0 0 1 566.0988 1163.5396)" class="st23 st1 st24">Hidden Text</text>
</g>
</g>
</svg>
的问题是,我不完全在(我们的设计师提供的插图产生多数民众赞成)的XML布局的太多的控制,以及原因,我希望我能在这里讨论,我们不能用JavaScript来完成这种效果。
如何在使用CSS时悬停在.hovertext元素上,将display: block
添加到#Hidden_Text
元素,并隐藏#Default_Text
元素?
谢谢!
只有CSS才能达到此目的 - 您可以在悬停时更改子元素的状态,而不是父级或兄弟级别。 – Toby