Homepage-Tipps & -tricks für Webmaster mit CSS: Mouseover-Info-Box mit CSS kreieren, formatieren und gestalten   


Freitag, 24. März 2023

05:02

Homepage-Tipps & -tricks für Webmaster mit CSS

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



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:10 aktualisiert.