Navigation mit unterschiedlichen MouseOver-Bildern

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dieses Tutorial erläutert wir ihr mit einfachen CSS Boardmitteln eure Navigation mit unterschiedlichen MouseOver-Bildern ausstattet.
    == Code ==

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de"><head>
    3. <title>Navigation mit unterschiedlichen MouseOver-Bildern</title>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <style type="text/css">
    6. .menu > li > a {
    7. display:block;
    8. border:1px solid #cfcfcf;
    9. background-color:#fff
    10. }
    11. .menu > li {
    12. list-style-type: none;
    13. width:100px;
    14. }
    15. .menu > li > a:hover {
    16. background-color:transparent;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <ul class="menu">
    22. <li style="background:url('grafik1.gif') no-repeat right"><a href="#">hover 1</a></li>
    23. <li style="background:url('grafik2.gif') no-repeat right"><a href="#">hover 2</a></li>
    24. <li style="background:url('grafik3.gif') no-repeat right"><a href="#">hover 3</a></li>
    25. <li style="background:url('grafik4.gif') no-repeat right"><a href="#">hover 4</a></li>
    26. </ul>
    27. </body>
    28. </html>
    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.

    8.395 mal gelesen