|
|||
CSS popup erstellen
Hallo,
seit einiger Zeit versuche ich mit html und css Mitteln Info Popups zu erstellen, die durch einen Hover Effekt über ein bestimmtes Control sichtbar werden und beim entfernen des Cursers wieder unsichtbar werden. Hierbei bin ich recht weit gekommen, habe nur das Problem dass wenn wie im Beispiel unten z.B. ein img tag (oder auch link) verdeckt wird, dieses leider "durchscheint". Im Beispiel unten kommt ein Popup wenn man über das (i) (alt tag in einem img) hovert. In der Zeile drunter, die überdeckt werden soll, scheint der alt text durch. Habt ihr eine Idee wie man das ändern kann? Vielen Dank für jeden Hinweis. Peter HTML-Code:
<head> <style> div img { z-index: 0; } .spanADesired { z-index: 10; position: relative; color: #8b4513; text-decoration: underline; margin-right: 2px; margin-left: 2px; } .spanADesired div { display: none; } .spanADesired:hover div { z-index: 10; display: block; position: absolute; top: 2em; left: 2em; width: 15em; border: 2px solid black; background-color: #A2D698 !important; /*background-image: url("http://www.w3schools.com/css/paper.gif"); */ color: #000; text-align: center; padding: 5px; } .spanAWrong { z-index: 0; position: relative; color: #8b4513; text-decoration: underline; margin-left: 3px; margin-right: 2px; } .spanAWrong div { display: none; } .spanAWrong:hover div { z-index: 10; display: block; position: absolute; top: 2em; left: 2em; width: 15em; border: 2px solid black; background-color: #F59795; color: #000; text-align: center; padding: 5px; } </style> </head> <body> <div> <span>shut →</span> <span> shut </span> <span class="spanADesired"> <img class="clsIco" src="/DesktopModules/stuff/Images/Icons/someicon.gif" alt="(i)" /> <div>some content of the popup</div> </span> </div> <div> <div style=""> <span>Desired →</span> <span class="spanAWrong"> Desired stuff <div> Your answer was: <b>dsfadf</b>»asefa« </div> </span> <span class="spanADesired"> <img src="/DesktopModules/stuff/Images/Icons/someicon.gif" alt="alt text" /> </span> </div> </div> </body> |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 16:09 |
2 CSS Files -> 1 CSS File | Habi | CSS | 7 | 17.02.2010 15:25 |
CSS hintergrund erstellen ? | akiv | CSS | 3 | 10.06.2008 22:24 |
Wege zum guten CSS - Ausgewählte Links | Sp33dy G0nz4l3s | Ressourcen | 1 | 27.05.2008 11:09 |
Tabellen mit CSS | ShadowDeath | CSS | 3 | 15.03.2005 23:54 |