(Stand: 22.11.24, Adresse: http://www.grammiweb.de/html/html088.shtml)
CSS-Informationsbox
Mit CSS und der Möglichkeit, Elemente (un-)sichtbar zu machen, können Sie eine Informationsbox gestalten, in der sich zusätzliche Angaben zu einem Schlüsselbegriff befinden.
Im Beispiel wird der vom <span>-Tag umschlossene Textteil
erst angezeigt, wenn der Mauszeiger über dem entsprechenden Link hält.
Beispiel (einfach den Mauszeiger über das Fragezeichen bewegen):
Eine Infobox rein in CSS (?)
Information:
Tolle Tipps gibt es im Grammiweb
realisiert.
Der Quellcode:
<html><head>
<style type="text/css">
a.info { border-bottom: 1px dashed #800000; text-decoration: none }
a.info:hover { cursor: help; background: #FFFFFF }
a.info span { visibility: hidden; position: absolute; left: 20em; margin-top: 1em; padding: 1em; text-decoration: none }
a.info:hover span { visibility: visible; border: 1px solid #800000; color: #800000; background: #F8F9B9 }
</style>
</head><body>
<p>Eine Infobox rein in CSS <a class="info" href="#">(?)
<span>
<b>Information:</b><br><br>
Cascading Style Sheets
</span>
</a> realisiert.</p>
</body>
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.11.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt