Переключить отображение скрытого/блока для многих div с помощью разных диапазонов только с помощью css

Question

Для моего учебного сайта japanes я создаю kana-helper: каждый раз, когда курсор наводится на кану (основные японские символы) в тексте, принадлежность romaji следует показывать в фиксированном div.

Я очень новичок в css и html и т. Д., И с помощью help of this community a удалось выполнить задание наполовину.

Вот мой код до сих пор (сводится к абсолютно необходимым):

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;} 

To:

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/