SVG CSS3從其他元素懸停顯示和隱藏元素

Question

鑑於下面的SVG，我試圖使用CSS來允許用戶將鼠標懸停在中的分類元素g#Main_Layer中，以取消隱藏#Hover_Panels中無關的g元素。請看下圖：

<?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元素？

謝謝！

Answer 1

單獨使用CSS來指定不直接位於後面（「+」運算符）或下面（有些子對象）的元素是不可能的。

但是你也可以使用visibility: collapse代替display: none爲#Hidden_Text（看起來完全一樣），並定義#Hidden_Text一個<set>動畫如果文本懸停該屬性凝固爲visible。你需要用隱藏的文字在<tspan>並申請一個ID，hovertext使之成爲可能：

<?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{visibility: collapse;} 
    .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" id="hovertext" 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 id="Hidden_Text" class="st22"> 
      <text transform="matrix(1 0 0 1 566.0988 1163.5396)" class="st23 st1 st24"> 
       <tspan>Hidden Text</tspan> 
       <set attributeName="visibility" to="visible" begin="hovertext.mouseover" end="hovertext.mouseout"/> 
      </text> 
     </g> 
    </g> 
</g> 
</svg> 

我不知道很多關於什麼插畫讓你做，但至少它的工作原理沒有JavaScript 。