SVG CSS3 Ein- und Ausblenden Element auf schweben von anderem Elemente

Question

die SVG Da unten, ich versuche, CSS zu verwenden, eine zu ermöglichen, über tspan.hovertext eingestuft Elemente innerhalb g#Main_Layer zu schweben, ohne Bezug g Elemente in #Hover_Panels sichtbar machen. Siehe unten:

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

Das Problem ist, ich bin nicht gerade in viel Kontrolle über das XML-Layout (das ist die durch Illustrator von unserem Designer zur Verfügung gestellt), und aus Gründen wünsche ich, dass ich hier diskutieren könnte, können wir nicht verwenden Javascript, um diesen Effekt zu erzielen.

Wie erhalte ich, wenn man sich nur mit CSS, wenn sie über ein .hovertext Element schwebt, display: block zum #Hidden_Text Elemente hinzuzufügen, und blenden Sie das #Default_Text Element?

Vielen Dank!

Answer 1

Mit CSS allein ist es nicht möglich, ein Element nicht direkt dahinter ("+" Operator) oder darunter (einige untergeordnete Elemente) anzugeben.

Aber Sie könnten stattdessen visibility: collapse statt display: none für #Hidden_Text verwenden (die genauso aussieht) und definieren eine <set> Animation in #Hidden_Text, die diese Eigenschaft zu visible setzt, wenn der Text schwebte wird. Sie müssen den verborgenen Text in einem <tspan> und anzuwenden, um eine ID an die hovertext wickeln zu dem möglich machen:

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

Ich weiß nicht viel über das, was Illustrator ermöglicht es Ihnen, zu tun, aber zumindest funktioniert es ohne JavaScript .