Donnerstag, Februar 09, 2012

Html Popups mit CSS

Der Originalbeitrag kommt von psacake.com.

Es wird ein Link ausgenutzt, um die Funktionalitaet bereit zu stellen:
This is the LinkThis is the Popup
Und nun noch der CSS Code:
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
ohne-css.gehts-gar.net hat das noch etwas weiter getrieben und eine Grafik integriert:
a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}

Keine Kommentare: