CSS: Infobox Popup bei Weblinks

Der CSS Part sieht folgendermaßen aus:

a span {
   display: none;
}

a:hover span {
   display:block;
   position:fixed;
   top 72;
   left: 0;
   width: 124px;
   padding: 5px;
   margin: 10px;
   z-index: 10;
   color: #000;
   background: #FFF;
   font: 10px Verdana, sans-serif;
   text-align: center;
   border: 1px dashed #257;
}

Mit den Werten in Zeile 8 bis 18 müsst ihr natürlich etwas herumspielen, um es an die Gegebenheiten eurer Homepage anzupassen.

Noch eine Anmerkung zu Zeile 8: „position: fixed“ funktioniert beim Internet Explorer nicht ohne weiteres! Hier findet ihr eine schöne Anleitung, wie ihr dem IE das Fixieren von Elementen beibringt. Auf meiner Webseite habe ich einfach ein separates CSS benutzt, das „position: fixed“ durch „position: absolute“ ersetzt. Ihr könnt die beiden Dateien ja mal vergleichen: https://www.redbrick.de/css/main.css und https://www.redbrick.de/css/ie.css

Wenn ihr das Style Sheet korrekt eingebunden habt, dann könnt ihr mit folgendem Code die Popup-Box erzeugen.

Link-TextPopup-Text

Wie das ganze dann aussieht, dass seht ihr, wenn ihr mit dem Mauszeiger über die Links in den Menüs auf dieser Homepage geht (oben oder links). Die Infobox erscheint dann direkt über dem linken Menü.