SVG悬停圆形时CSS控制的隐藏文本无法显示问题咨询

问题根因 #

你使用的+相邻兄弟选择器的匹配规则是仅选中紧贴在目标元素后第一个同级元素，而你的业务代码DOM结构中，5个<circle>元素是连续排列的，所有<text>元素全部排在5个circle之后：

<!-- 你的实际DOM顺序 -->
<circle class="btn1"></circle>
<circle class="btn2"></circle>
<circle class="btn3"></circle>
<circle class="btn4"></circle>
<circle class="btn5"></circle>
<text class="ctxt1"></text>
<text class="ctxt2"></text>
...

此时.btn1:hover + .ctxt1试图匹配btn1紧挨着的下一个元素，但btn1后面的第一个元素是btn2，自然找不到ctxt1，选择器完全无法命中。而你测试用的demo里circle后面直接跟text，符合相邻兄弟的匹配规则，所以可以正常生效。

修复方案 #

把所有相邻兄弟选择器+替换为**通用兄弟选择器~**即可，~会匹配目标元素之后所有同级的对应元素，不受中间隔了其他元素的影响：

/* 修改前 */
.btn1:hover + .ctxt1 { visibility: visible; }
/* 修改后 */
.btn1:hover ~ .ctxt1 { visibility: visible; }
/* 其余4个选择器同理修改即可 */

修改完成后悬停逻辑即可正常触发。

内容的提问来源于stack exchange，提问作者Jan Magnussen