Transparente Info-Boxen bei Mouseover

Beispiel an einem Navigationsmenü

Im Normalzustand sind die Info-Boxen unsichtbar; sobald Sie jedoch mit Ihrer Maus über die Links fahren, werden diese sichtbar!

Falls Sie nicht gerade mit dem Internet Explorer unterwegs sind, weisen die bei Mouseover erscheinenden Info-Boxen eine leichte Transparenz auf; diese war durch die Eigenschaft 'opacity' zu erreichen, die bei Bedarf auch unter dem Selektor 'a.box:hover span' in der CSS-Datei anderweitig eingestellt werden kann. (hier im Beispiel wird der Wert bzw. Transparenzstufe von 0.9 verwendet). Erlaubte Werte liegen zwischen 0.00 (vollständige Transparenz) und 1.00 (keine Transparenz).

Die Transparenz wurde in den folgenden Browsern getestet:

- Internet Explorer 8
- Opera (Version 10.61)
- Safari (Version 5.0.1)
- Mozilla Firefox (Version 3.6)

Testergebnis: Bis auf den Internet Explorer interpretieren alle oben aufgeführten Browser diese Transparenz! Mit der Einführung von CSS Level 3 wird dann auch der IE die Transparenzdarstellung unterstützen.

Beispiel downloaden

www.homepage-vorlagen-webdesign.de