Per Hover anderes Element einblenden (z.B. Text/DIV)

Hallo, ich suche eine lösung für folgendes Problem:

Ich habe einige Anker in der selben Zeile. Bei einem Hover über ein Anker, soll ein Text eingeblendet werden.
Der Text soll über der Ankerzeile zentriert stehen. Bei jedem Anker soll er an der selben Stelle stehen.
Habe es leider bisher nur so hinbekommen:
http://jsfiddle.net/n1a6nk21/

Ich denke es kann so funktionieren:
Bei einem Hover über ein Anker, wird ein anderes Element (z.B. DIV) außerhalb des Ankers angesprochen.
Nach langer suche im Internet, denke ich, dass das wahrscheinlich nur über JavaScript machbar ist.

In dem Beispiel: Nimm den <a>'s die relative Position weg, gib sie dafür einem Elternelement und richte an diesem aus. Absolute Positionierung erfolgt immer im Verhältnis zum nächsthöheren relativ oder absolut positionierten Elternelement.

Übrigens: Sachen wie left:50%; gehen meist in die Hose. Damit ist der linke Rand deines Elements in der Mitte des Elternelements. Für moderne Browser solltest du mit calc() arbeiten, z.B. left: calc(50% - 50px); Man beachte die Leerzeichen in der Klammer, die sind Pflicht. 50%-50px geht nicht.