Benutzer:Mediator/hovered by CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
K |
K |
||
| Zeile 1: | Zeile 1: | ||
{{#css: | {{#css: | ||
| − | + | .tooltip { | |
| − | + | position: relative; | |
| − | + | border-bottom: 1px dotted #C20; cursor: help; | |
| + | } | ||
| + | .tooltip:hover {z-index: 1;} | ||
| + | .tooltip em {display: none;} | ||
| + | .tooltip:hover em { | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
left: 0; top: 0; | left: 0; top: 0; | ||
margin: 20px 0 0; | margin: 20px 0 0; | ||
| + | width: 200px; color: #D3A7A7; | ||
| + | font-style: normal; | ||
| + | border: 2px solid #00ACE6; | ||
| + | padding: 4px; | ||
| + | background: #4B4B4E; | ||
| + | } | ||
}} | }} | ||
---- | ---- | ||
| − | <p>Ein bisschen Text und ein | + | <p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p> |
| − | |||
| − | <span class="tooltip"> | ||
---- | ---- | ||
* http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html | * http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html | ||
Version vom 9. Mai 2013, 09:11 Uhr
{{#css: .tooltip { position: relative; border-bottom: 1px dotted #C20; cursor: help; } .tooltip:hover {z-index: 1;} .tooltip em {display: none;} .tooltip:hover em { display: block; position: absolute; left: 0; top: 0; margin: 20px 0 0; width: 200px; color: #D3A7A7; font-style: normal; border: 2px solid #00ACE6; padding: 4px; background: #4B4B4E; } }}
Ein bisschen Text und ein wenig Information Leider keine Info vorhanden ! und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu unglaublichNa soviel Text ist... viel Text. Und noch ein bisschen mehr,....