CSS Tutorial3
| « Zurück zur Übersicht | CSS-Tutorial | Klicks |
Tolle Hover Effekte
In verschiedenen Ausführungen
Der "Hover"-Effekt wird in den unterschiedlichsten Anwendungsbereichen genutzt. Sei es bei Hyperlinks, Images, Div-Boxen, Buttons und und und...
Als Hover bezeichnet man allgemein die veränderung eines Elements beim Darüberfahren mit der Maus. Poddi zeigt euch ein paar Tricks...
HyperlinksFahr über diesen Link <style type="text/css">
<!-- a:hover{ padding: 3px; color: #fff; background: #cc0000; font-weight: bold;} --> </style> |
Image |
<style type="text/css">
<!-- img{ width: 120px; height: 100px; cursor: pointer;} img:hover{ width: 175px; height: 140px;} --> </style> |
Div-Box
|
Fahr über diesen Bereich...
<style type="text/css">
<!-- #box{ width: 200px; padding: 5px; border: 1px solid #e0e0e0; background: #fff;} #box:hover{ background-image: url(BILD-URL); background-color: #cccccc; background-repeat: no-repeat;} --> </style> <div id="box">Boxeninhalt</div>
|
Fahr über diesen Bereich...
<style type="text/css">
<!-- #box{ width: 300px; padding: 5px; padding-left: 8px; border: 1px solid #e0e0e0; background: #fff;} #box:hover{ padding-left: 4px; border-left: 5px solid #cc0000; background: #eeeeee} --> </style> <div id="box">Boxeninhalt</div>
|
Div-Boxen können mit CSS so gut wie jeden Hover Effekt annehmen. Du kannst Hintergund ändern, einen Rahmen dicker machen, oder sogar die Position der Box beim Darüberfahren ändern. Der Kreativität ist dabei keine Grenze gesetzt. |
KompatibilitätFF, IE, Opera, Chrome, Safari |
Bewertung |
Links