0

For my japanes learning site i am building a kana-helper: Every time when the cursor hovers over a kana (basic japanese characters) in the text, the belonging romaji should be shown in a fixed div.

I am a very beginner in css and html etc. and with the help of this community a was able to get the job half done.

Here is my code so far (reduced to the absolutely necessary): 

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>

So far it does what it is supposed to do. The problem is, that i need many of these divs (a little more than 200, one for each kana). But ist does not even work with two:

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>

I hope anybody can help me.

P.S.: Sorry for my poor english.

Community
  • 1
  • 1
Koyagi
  • 143
  • 6
  • 1
    Your + (adjacent sibling) selector will only select *adjacent* siblings. Once you add another span in between the your original span and the div, they are no longer adjacent. Try changing "+" to "~" (~ is a general sibling selector) – dgavian Jul 10 '15 at 21:44
  • \o/ works, thank you so much! – Koyagi Jul 10 '15 at 21:52

2 Answers2

0

Change:

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;}
dgavian
  • 250
  • 2
  • 10
0

I think dgavian found your problem - if you wanted to you could easily do what you're trying to do with pseudo elements.

<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/

shrekked
  • 1
  • 2