[Letzte Bearbeitung: 22. Juni 2010]
Beim Bewegen der Maus über das Fragezeichen wird ein Hinweistext eingeblendet:
Im body wird das Fragezeichen als Link und der Hinweistext gesetzt. Im head werden unter style, type: text/css die css-Befehle gesetzt.
© com! Das Computer-Magazin.
| Programmschritt | Code |
|---|---|
| Im Body wird eingegeben, was zu sehen (das Fragezeichen), und in einem span-Tag das, was zunächst verborgen ist (die erläuternde Einblendung). Das ganze ist als "info" klassifiziert. |
<div class="info"> <a href="#"> ? <span>Sie müssen keine zusätzlichen Browserfenster öffnen, um Hilfetexte einblenden zu lassen.</span> </a> </div> |
| Im Style-Feld wird die Breite des info-Elementes festgelegt und außerdem bestimmt, das es zuoberst liegt. |
.info { width: 20px; z-index: 99; } |
| Hier werden die Schriftattribute definiert: fettes Weiß auf Dunkelblau. |
.info a { color: #FFF; font: bold 18px Verdana; text-decoration: none; background-color: #006; display: block; padding: 3px 5px 3px 5px; } |
| Das eingeblendete Kästchen erzeugt ein schwarzes Fragezeichen auf hellblauem Untergrund. | .info a:hover { color: #000; background-color: #CCF; width: 350px; } |
| Das Kästchen bleibt ohne Mausbewegung verborgen. | .info a span {display: none;} |
| Erläuternder Text auf weißem Untergrund, der sich von Hellblau zusätzlich abhebt. | .info a:hover span { color: #000; background-color: #FFF; font: 14px Modern; display: block; padding: 5px; } |