Xml SVG CSS3在悬停时显示和隐藏其他元素的元素

考虑到下面的SVG，我试图使用CSS允许将鼠标悬停在

tspan.hovertext

g#Main_层中的已分类元素上，以取消隐藏

#hover_面板

中不相关的

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>

文本{字体系列：'Lato'；字体重量：300；}
#悬停文本{
文本转换：大写；
}
.st0{fill:#404041；}
.st1{字体系列：'Lato'；字体重量：300；}
.st5{字体系列：'Lato'；字体重量：400；}
.st6{字体大小：20px；}
.st7{填充：无；笔划：#5880AC；笔划宽度：1.073；}
.st22{显示：无；}
.st23{显示：内联；填充：#016699；}
.st24{字体大小：26.44px；}
.悬停文字{
光标：指针；
}
.hover文本：悬停{
字体大小：粗体；
}
.hover文本：悬停+隐藏的文本{
显示：块；
}
悬停
悬停文本
默认文本
隐藏文本

问题是我不能完全控制XML布局（它是由我们的设计师提供的Illustrator生成的），出于我希望在这里讨论的原因，我们不能使用Javascript来实现这种效果

仅使用CSS时，当鼠标悬停在.hovertext元素上时，如何将

显示：block

添加到

#Hidden_Text

元素，并隐藏

#Default_Text

元素

---

谢谢大家!

单独使用CSS无法指定不直接位于（“+”运算符）后面或下面（某些子级）的元素

但是您可以对

#Hidden_Text

（看起来完全相同）使用

可见性：塌陷

而不是

显示：无

，并在

#Hidden_Text

中定义一个

动画，如果文本悬停，该动画将此属性设置为

可见

。您需要将隐藏文本包装在

中，并对悬停文本应用一个id，以便：

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

文本{字体系列：'Lato'；字体重量：300；}
#悬停文本{
文本转换：大写；
}
.st0{fill:#404041；}
.st1{字体系列：'Lato'；字体重量：300；}
.st5{字体系列：'Lato'；字体重量：400；}
.st6{字体大小：20px；}
.st7{填充：无；笔划：#5880AC；笔划宽度：1.073；}
.st22{可见性：崩溃；}
.st23{显示：内联；填充：#016699；}
.st24{字体大小：26.44px；}
.悬停文字{
光标：指针；
}
.hover文本：悬停{
字体大小：粗体；
}
.hover文本：悬停+隐藏的文本{
显示：块；
}
悬停
悬停文本
默认文本
隐藏文本

---

我不知道Illustrator允许您做什么，但至少它可以在没有JavaScript的情况下工作。

仅使用CSS无法实现这一点-您可以在悬停时更改子元素的状态，而不是更改父元素或兄弟元素的状态。