在 SVG 文件中，我的 CSS 隐藏文本没有显示

Question

在我的SVG插图下，当我将鼠标悬停在圆的搜索上时，我希望出现一个文本。它可以在一个简单的设置中工作，但不能在最终的插图中工作。

我错过了什么？

我认为.btn1:hover + .ctxt1是正确的选择，我已经检查过了。

.txt2 {
visibility: hidden;
} 
#c4:hover + .txt2 {
visibility: visible;
}

<svg viewBox="0 0 400 400" class="svg-5">
<circle id="c4" class="circle btn4" alt="four" cx="156.18" cy="248.57" r="133" data-Name="shape 4" data-tabindex="0" />
<text class="txt2" x="20"  y="40">Example SVG text 1</text>
</svg>

:root {
--color-1: #F2B705;
--color-2: #C30F0E;
--color-3: #264ABA;
--color-4: #009CD2;
--color-5: #E25727;

--color-11: #C29204;
--color-22: #990B0B;
--color-33: #172E73;
--color-44: #006B8E;
--color-55: #BA4620;
}
/*the circles css (normal case)*/
#c1 {
fill: var(--color-1);
}
#c2 {
fill: var(--color-2);
}
#c3 {
fill: var(--color-3);
}
#c4 {
fill: var(--color-4);
}
#c5 {
fill: var(--color-5);
}
/*the lines css (normal case)*/
line {
stroke: #c1c1c1;
stroke-width: 22;
}
#c1:hover {
stroke: var(--color-11);
stroke-width: 21.5;
}
#c2:hover {
stroke: var(--color-22);
stroke-width: 21.5;
}
#c3:hover {
stroke: var(--color-33);
stroke-width: 21.5;
}
#c4:hover {
stroke: var(--color-44);
stroke-width: 21.5;
}
#c5:hover {
stroke: var(--color-55);
stroke-width: 21.5;
}
/*the active circle css*/
.activeC5 {
stroke: var(--color-55);
stroke-width: 21.5;
}
.circle:hover {
cursor: pointer;
}
.ctxt {
color:#000000;
font-size:5em;
}
.ctxt1, .ctxt2, .ctxt3, .ctxt4, .ctxt5 {
visibility: hidden;
}
.btn1:hover + .ctxt1 {
visibility: visible;
}
.btn2:hover + .ctxt2 {
visibility: visible;
}
.btn3:hover + .ctxt3 {
visibility: visible;
}
.btn4:hover + .ctxt4 {
visibility: visible;
}
.btn5:hover + .ctxt5 {
visibility: visible;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 940 1000">
<defs>
<style type="text/css"></style>
</defs>
<line id="c1-c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
<line id="c1-c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
<line id="c1-c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
<line id="c1-c5" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>
<line id="c2-c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
<line id="c2-c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
<line id="c2-c5" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
<line id="c3-c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
<line id="c3-c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
<line id="c4-c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>

<!-- on clicking a circle, it goes to the corresponding page url, except for the active circle -->
<circle id="c1" onClick="window.location='/trans-disciplinary'" class="circle btn1" onmouseout="" cx="455.9" cy="133.5" r="133" /> 
<circle id="c2" onClick="window.location='/data-democracy'" class="circle btn2" onmouseout=""  cx="779.33" cy="368.43" r="133" />
<circle id="c3" onClick="window.location='/cryptography-and-math'" class="circle btn3" onmouseout="" cx="656.32" cy="748.57" r="133" />
<circle id="c4" onClick="window.location='/translation'" class="circle btn4" onmouseout="" cx="256.18" cy="748.57" r="133" />
<circle id="c5" class="activeC5 circle btn5" cx="133.5" cy="368.62" r="133" />

<text text-anchor="middle" id="cx1" class="ctxt ctxt1" x="455" y="970">Trans-disciplinary</text>
<text text-anchor="middle" id="cx2" class="ctxt ctxt2" x="455" y="970">Data Democracy</text>
<text text-anchor="middle" id="cx3" class="ctxt ctxt3" x="455" y="970">Cryptography and Math</text>
<text text-anchor="middle" id="cx4" class="ctxt ctxt4" x="455" y="970">Translation</text>
<text text-anchor="middle" id="cx5" class="ctxt ctxt5" x="455" y="970">Application</text>                             
<script></script>
</svg>

Answer 1

尝试使用.btn1:hover ~ .ctxt1并用"替换class="circle btn1>”<

:root {
--color-1: #F2B705;
--color-2: #C30F0E;
--color-3: #264ABA;
--color-4: #009CD2;
--color-5: #E25727;
--color-11: #C29204;
--color-22: #990B0B;
--color-33: #172E73;
--color-44: #006B8E;
--color-55: #BA4620;
}
/*the circles css (normal case)*/
#c1 {
fill: var(--color-1);
}
#c2 {
fill: var(--color-2);
}
#c3 {
fill: var(--color-3);
}
#c4 {
fill: var(--color-4);
}
#c5 {
fill: var(--color-5);
}
/*the lines css (normal case)*/
line {
stroke: #c1c1c1;
stroke-width: 22;
}
#c1:hover {
stroke: var(--color-11);
stroke-width: 21.5;
}
#c2:hover {
stroke: var(--color-22);
stroke-width: 21.5;
}
#c3:hover {
stroke: var(--color-33);
stroke-width: 21.5;
}
#c4:hover {
stroke: var(--color-44);
stroke-width: 21.5;
}
#c5:hover {
stroke: var(--color-55);
stroke-width: 21.5;
}
/*the active circle css*/
.activeC5 {
stroke: var(--color-55);
stroke-width: 21.5;
}
.circle:hover {
cursor: pointer;
}
.ctxt {
color:#000000;
font-size:5em;
}
.ctxt1, .ctxt2, .ctxt3, .ctxt4, .ctxt5 {
visibility: hidden;
}
.btn1:hover ~ .ctxt1 {
visibility: visible;
}
.btn2:hover ~ .ctxt2 {
visibility: visible;
}
.btn3:hover ~ .ctxt3 {
visibility: visible;
}
.btn4:hover ~ .ctxt4 {
visibility: visible;
}
.btn5:hover ~ .ctxt5 {
visibility: visible;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 940 1000">
<defs>
<style type="text/css"></style>
</defs>
<line id="c1-c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
<line id="c1-c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
<line id="c1-c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
<line id="c1-c5" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>
<line id="c2-c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
<line id="c2-c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
<line id="c2-c5" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
<line id="c3-c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
<line id="c3-c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
<line id="c4-c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>

<!-- on clicking a circle, it goes to the corresponding page url, except for the active circle -->
<circle id="c1" onClick="window.location='/trans-disciplinary'" class="circle btn1" onmouseout="" cx="455.9" cy="133.5" r="133" /> 
<circle id="c2" onClick="window.location='/data-democracy'" class="circle btn2" onmouseout=""  cx="779.33" cy="368.43" r="133" />
<circle id="c3" onClick="window.location='/cryptography-and-math'" class="circle btn3" onmouseout="" cx="656.32" cy="748.57" r="133" />
<circle id="c4" onClick="window.location='/translation'" class="circle btn4" onmouseout="" cx="256.18" cy="748.57" r="133" />
<circle id="c5" class="activeC5 circle btn5" cx="133.5" cy="368.62" r="133" />

<text text-anchor="middle" id="cx1" class="ctxt ctxt1" x="455" y="970">Trans-disciplinary</text>
<text text-anchor="middle" id="cx2" class="ctxt ctxt2" x="455" y="970">Data Democracy</text>
<text text-anchor="middle" id="cx3" class="ctxt ctxt3" x="455" y="970">Cryptography and Math</text>
<text text-anchor="middle" id="cx4" class="ctxt ctxt4" x="455" y="970">Translation</text>
<text text-anchor="middle" id="cx5" class="ctxt ctxt5" x="455" y="970">Application</text>                             
<script></script>
</svg>

Answer 2

对于文本使用：

.ctxt1, .ctxt2, .ctxt3, .ctxt4, .ctxt5 {

显示：无；}

悬停使用：

#c4:hover, #cx4 { display: block; }