Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Verwalten Sie Ihre Webfarben

Behalten Sie mit MyColor Studio den Überblick über Ihre Onlineprojekte

Hier klicken und mehr erfahren

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>


Zurück zum Inhaltsverzeichnis

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.01.2020
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt