✔ Text Onmouseover Div einblenden

Dafür ist kein JS erforderlich - CSS schafft das allein :)



Die in den Beispielen verwendeten <a>-Tags lassen sich auch durch andere HTML-Elemente ersetzen, z.B. <span>.

Das Grundprinzip stellt sich so dar:

HTML: 
<span class="popup">Bei Mausberührung ein Text <span>mit weiterem Inhalt</span></span>
CSS: 
span.popup span {display:none}
span.popup:hover span {display:block}

Durch eine relative Positionierung der Klasse .popup, lässt sich das Kindelement mit einer absoluten Positionierung aus dem normalen Textfluß nehmen, und an einer gewünschten Stelle ein-/ausblenden:

CSS: 
span.popup span {display:none;position:relative}
span.popup:hover span {display:block;position:absolute;left:40px;top:20px;z-index:10;background:#eee;border:thin solid #ccc;padding:10px}
 
Zuletzt bearbeitet:
..mit tooltip js solltest Du noch weitere Umsetzungsbeispiele finden.

mfg chmee
 
Vielen Dank für die beiden Super Antworten! Das war genau das, wonach ich gesucht habe :)

LG tester
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück