Bei hover einen eigenen Text einblenden

Hallo zusammen,

ich habe mit FontAwesome ein Info-Icon auf einer Webseite eingebunden zum Darstellen eines eigenen Textes. Mit hover möchte ich gerne den eigenen Text einblenden um Besuchern zusätzliche Informationen mitzuteilen. Ich habe irgendeinen Fehler noch, auf den ich im Augenblick aber nicht komme. Es funktioniert zwar "display:none;" noch aber der Hover-Effekt stellt sich nicht ein, wenn man mit der Maus auf das Icon fährt.
Wer kann mir bitte helfen und mitteilen, wo hier mein Problem liegt?
Anbei der von mir generierte Code.

HTML-Code:

---

<div class="ce_fontAwesomeIcon">
    <i class="fa fa-info-circle"></i>
    <span class="info_text">Hier der Text rein</span>
</div>

---

Code:

---

span.info_text {
    display:none;
}

span.info_text:hover {
    display:block;
    background-color:#ffffe1
    border:1px solid #707070;
}

---

Danke!

Gruß
Thomas

Hallo,

dein .info_text wird ja nicht angezeigt, also kann auch kein hover drüber funktionieren.
Du kannst dein hover auf .ce_fontAwesomeIcon setzen

Das hover muss doch aufs Icon gehen und nicht auf den versteckten Text.
Und da es ein Geschwisterelement ist, was du einblenden möchtest, brauchst du den Sibling-Selektor ~.

Also dann so:

HTML-Code:

---

i:hover ~ .info_text {
    display:block;
    background-color:#ffffe1
    border:1px solid #707070;
}

---

Ist aber ungetestet.

Aber Vorsicht: der i-Selektor greift jetzt auf alle Icons in der Seite. Wenn du mehr davon hast, grenze den Selektor mit einer Klasse ein.

Edit: Mist zu spät :D