仅通过 css 通过不同跨度为许多 div 切换显示 hidden/block

Question

我正在为我的日语学习网站构建一个假名助手：每次当光标悬停在文本中的假名（基本日语字符）上时，所属的罗马字应该以固定的方式显示 div .

我是 css 和 html 等方面的初学者，使用可以完成一半的工作。

到目前为止，这是我的代码（减少到绝对必要）：

span.ko:hover + #kanahelfer-ko {display: block;}

#kanahelfer-ko { 
    position: fixed;
    display: none;
    top: 100px;
    left: 100px;
}

<span class="ko">こ</span>

<div id="kanahelfer-ko">ko</div>

到目前为止它做了它应该做的事情。问题是，我需要很多这样的 div（200 多个，每个假名一个）。但 ist 甚至不能与两个一起使用：

span.ko:hover + #kanahelfer-ko {display: block;}
span.re:hover + #kanahelfer-re {display: block;}

#kanahelfer-ko { 
    position: fixed;
    display: none;
    top: 100px;
    left: 100px;
}

#kanahelfer-re { 
    position: fixed;
    display: none;
    top: 100px;
    left: 100px;
}

<span class="ko">こ</span><span class="re">れ</span>

<div id="kanahelfer-ko">ko</div>
<div id="kanahelfer-re">re</div>

我希望有人能帮助我。

P.S.: 对不起我的英语不好

Answer 1

变化：

span.ko:hover + #kanahelfer-ko {display: block;}
span.re:hover + #kanahelfer-re {display: block;}

收件人：

span.ko:hover ~ #kanahelfer-ko {display: block;}
span.re:hover ~ #kanahelfer-re {display: block;}

Answer 2

我认为 dgavian 发现了你的问题 - 如果你愿意，你可以很容易地用伪元素做你想做的事情。

<span class="ko">こ</span><span class="re">れ</span>

.ko:after {
    content: "ko";
    display: none;
    top: 100px;
    left: 100px;
    position: fixed;
} 
.re:after {
    content: "re";
    display: none;
    top: 100px;
    left: 100px;
    position: fixed;
}

span:hover:after {
    display: block;
}

span {
    display: inline;
}

https://jsfiddle.net/jhev6w10/

仅通过 css 通过不同跨度为许多 div 切换显示 hidden/block

Toggle display hidden/block for many divs via different spans only with css

html

css

hidden

hover