css - 在 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>

标签： csssvg

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>