== Code ==
Alles anzeigen
== Erläuterung ==
Wenn man davon ausgeht, dass man das Resultat gerne dynamisch erreichen möchte und dafür keinen dynamischen CSS Code erstellen will, kann man dazu eine Recht einfache Lösung einsetzen.
Indem dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gegeben wird - hat jedes Element schonmal eine Hintergrundgrafik, die nicht sichtbar ist.
Beim Hovern über den Link (vorsicht, das Hover Element gibt es beim IE6 nur auf <a> Elementen) entfernt man das Hintergrundbild.
== Demo ==
Eine Live Demo findet ihr unter demo.easy-coding.de/css/naviga…dlichen-mouseover-bildern. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt: download.zip.
Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de"><head>
- <title>Navigation mit unterschiedlichen MouseOver-Bildern</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <style type="text/css">
- .menu > li > a {
- display:block;
- border:1px solid #cfcfcf;
- background-color:#fff
- }
- .menu > li {
- list-style-type: none;
- width:100px;
- }
- .menu > li > a:hover {
- background-color:transparent;
- }
- </style>
- </head>
- <body>
- <ul class="menu">
- <li style="background:url('grafik1.gif') no-repeat right"><a href="#">hover 1</a></li>
- <li style="background:url('grafik2.gif') no-repeat right"><a href="#">hover 2</a></li>
- <li style="background:url('grafik3.gif') no-repeat right"><a href="#">hover 3</a></li>
- <li style="background:url('grafik4.gif') no-repeat right"><a href="#">hover 4</a></li>
- </ul>
- </body>
- </html>
== Erläuterung ==
Wenn man davon ausgeht, dass man das Resultat gerne dynamisch erreichen möchte und dafür keinen dynamischen CSS Code erstellen will, kann man dazu eine Recht einfache Lösung einsetzen.
Indem dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gegeben wird - hat jedes Element schonmal eine Hintergrundgrafik, die nicht sichtbar ist.
Beim Hovern über den Link (vorsicht, das Hover Element gibt es beim IE6 nur auf <a> Elementen) entfernt man das Hintergrundbild.
== Demo ==
Eine Live Demo findet ihr unter demo.easy-coding.de/css/naviga…dlichen-mouseover-bildern. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt: download.zip.
7.928 mal gelesen