Mouseover-Info-Box mit CSS kreieren, formatieren und gestalten

Eine solche Box kann für viele Zwecke zum Einsatz kommen wie z. B. für erklärungsbedürftige Fremdwörter, Hilfetext sowie für News, Infos, Tipps uvm. Außerdem können Sie damit auch die einzelnen Links eines Navigationsmenüs detaillierter beschreiben.

Beispiel für eine Help-Box testen: HilfeHelp-Box für Hilfetext

Anweisungen in der CSS-Datei:

a.box
{
background-color: #ff9933;
color: #173C93;
padding: 3px;
text-decoration: none
}
a.box:hover
{
cursor: help;
background-color: #fff;
color: #ff9933
}
a.box span
{
position: absolute;
visibility: hidden;
margin-left: 2px;
margin-top: -10px;
padding: 8px;
text-decoration: none
}
a.box:hover span
{
visibility: visible;
border: 3px dotted #000;
color: #000;
background-color: #9FB0D3
}

Anweisung im Html-Dokument:

<a href="#" class="box">Hilfe</a>

Navigationsmenü mit transparenten Mouseover-Info-Boxen

Auch einzelne Links eines kompletten Navigationsmenüs lassen sich mit Boxen dieser Art von selbst erklären. Siehe dazu nachfolgendes Beispiel:
Beispiel ansehen

Das könnte Sie vielleicht auch interessieren:
[ Info-Box "Deluxe" mit 'legend' & 'fieldset' hervorheben ]
[ Scrollbare Div-Box anstatt Iframe ]

[ veröffentlicht am 03.09.2010 ] __________________________

  zurück