Infobox über Text, einfach mit CSS

zeroseven · Anmeldedatum: 20.08.2007 Beiträge: 12

Folgender Code zeigt über einem verlinkten Text beim MouseOver eine Infobox an (komplette HTML-Datei):

<html>
<head>
<style type="text/css">
body { font-family:Verdana; font-size:11px; }
a.info { border-bottom:1px solid #CCC; background:#EEE; text-decoration:none }
a.info:hover { cursor:help; background:#FFFFFF }
a.info span { visibility:hidden; position:absolute; margin-top:1em; padding:10px; text-decoration:none }
a.info:hover span { visibility:visible; border-left:1px solid #CCC; border-top:1px solid #CCC; border-bottom:1px solid #666; border-right:1px solid #666; color: #333; background: #EEE; }
</style>

</head><body>

Eine Infobox rein in CSS <a class="info" href="#">Erklärung
<span style="width:200px;">
Cascading Style Sheets Infobox. Mit MySQL-Anbindung kann Content dorekt in diie Box geladen erdne.
</span>
</a> realisiert.
<br><br>

Infobox rein in CSS <a class="info" href="#">(?)<span>Test</span></a> realisiert.

</body>
</html>