Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL
Help

Kapitel 12: Dynamische Effekte mit CSS  > 12.2 Rollover-Buttons erstellen - Pg. 198

12.2 Rollover-Buttons erstellen Rollover-Buttons wechseln das Aussehen, wenn ein Mauszeiger darüber fährt oder darauf zeigt. Links durch Rollover ändern 1. Erstellen Sie auf übliche Weise (siehe Kapitel 6) Links im (X) HTML-Dokument. 2. Im CSS stylen Sie die Selektoren a:link und a:visited mit dem ,,Ausgangszustand" der Links, indem Sie eine Hinter- grundfarbe oder Bildeigenschaften hinzufügen. 3. Verändern Sie die Farben oder Hintergründe für die Selek- toren a:focus und a:hover ein wenig, damit die Buttons ihr Aussehen wechseln, wenn sie den Fokus bekommen oder der Mauszeiger darüber schwebt. 4. Sie können bei Bedarf auch noch einen dritten Stil für die <title>Rollover-Buttons</title> <style type="text/css"> a {display: block; padding: 2px; text-decoration: none; width: 5em; margin: 2px; color: #8D4F10; font-family: "Trebuchet MS", Verdana, sans-serif;} a:link, a:visited {background: #efb57c; border: 2px outset #efb57c;} a:focus, a:hover {background: #DAA670; border: 2px outset #DAA670; color: black;} a:active {background: #BB8E60; border: 2px outset #BB8E60;} </style> </head> <body> <a href="home.html">home</a> <a href="about.html">über uns</a> <a href="examples.html">beispiele</a> <a href="extras.html">extras</a> <a href="opinions.html">meinungen</a> <a href="help.html">hilfe</a> Abbildung 12.7: In diesem einfachen Beispiel haben