1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

mouseover mit css

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von julee, 23.09.07.

  1. julee

    julee Fuji

    Dabei seit:
    07.02.07
    Beiträge:
    36
    Sorry, falls ich bereits die x.... bin, die diese Frage stellt, aber finde einfach keine Antwort, die auf mein Problem passt - oder besser, habs bisher noch nciht so recht verstanden, weil ich css-Neuling bin!


    Ich habe angefangen im Dreamweaver eine Seite zu erstellen. Ich arbeite mit Html und parallel dazu mit einem CSS skript.

    Nun habe ich folgendes vor:

    Ich habe Buttons erstellt die im html - skript als Links eingetragen sind. Wenn ich jetzt den Mouseovereefekt verwenden will, was muss ich tun!
    Meine Buttons sind mit Fireworks erstellt. Wenn man mit der Maus drüber geht, soll sich farblich was ändern. Dafür habe ich mit Fireworks weitere Buttons erstellt.
    Muss ich jetzt für jeden Button ein eigenes div-tag (heißt das so? :-D )erstellen? Hab mal mit dem home-Button angefangen!

    Hier mein Skript:


    <div class="menu">
    <div class="home">
    <a href="buttons_menueleiste/home.png">
    </a>
    <div class="home:oops:ver">
    <a href="buttons_menueleiste/home_over.png">
    </a>
    </div>
    </div>
    <a href="seite1.html">
    <img src="buttons_menueleiste/grammar.png" width="120" height="80" border="0" />
    </a>
    <a href="seite1.html">
    <img src="buttons_menueleiste/test.png" width="120" height="80" border="0" />
    </a>
    <a href="seite1.html">
    <img src="buttons_menueleiste/guestbook.png" width="120" height="80" border="0" />
    </a>
    <a href="seite1.html">
    <img src="buttons_menueleiste/links.png" width="120" height="80" border="0" />
    </a>
    </p>
    </div>


    und mein css-skript - im bereich menü sollen die button dann liegen!

    div.menu
    {
    width:129px;
    height:540px;
    text-align:center;
    float:left;
    background-color:#CCC;
    border-left:1px dotted black;
    border-right:1px dotted black;
    }
    div.home
    {
    width:auto;
    height:auto;
    background-image:url(../buttons_menueleiste/home.png);
    background-repeat:no-repeat;
    }
    div.home:hover
    {
    width:auto;
    height:auto;
    background-image:url(../buttons_menueleiste/home_over.png);
    }


    Jetzt brauch ich den profi, der mein Chaos wieder zurecht rückt! :eek:

    Wer kann mir helfen?
     
  2. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    wieso machst das nicht einfach mit bilder austauschen? befindet sich in den eigenschaften des bildes bei verhalten.
     
  3. julee

    julee Fuji

    Dabei seit:
    07.02.07
    Beiträge:
    36
    wo kann ich die eigenschaften bzw. das verhalten der bilder finden?
     
  4. julee

    julee Fuji

    Dabei seit:
    07.02.07
    Beiträge:
    36
    ha - habs gefunden - die buttons lagen nur aufeinander! :p

    jetzt funktionierts!

    freu...danke trotzdem!
     
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    das Menü wäre so semantisch korrekter:

    Code:
    <style type="text/css" media="screen">
        a:link, a:visited {
            color: #505050;
            text-decoration: none;
        }
        
        ul#menu {
            list-style: none;
        }
        
        #menu li {
            /* Kommentar entfernen für horizontales Menü:
            float: left;
            */
            line-height: 25px;
        }
        
        #menu li a:link, #menu li a:visited {
            display: block;
            width: 100px;
            height: 25px;
            background-color: #dadada;
            /* background-color ersetzen durch background-image */
        }
        
        #menu li a:hover {
            background-color: #999;
            /* background-color ersetzen durch background-image */
        }    
    </style>
    
    
    
    <ul id="menu">
        <li><a class="home" href="#">Home</a></li>
        <li><a class="grammar" href="#">Grammar</a></li>
        <li><a class="guestbook" href="#">Guestbook</a></li>
        <li><a class="links" href="#">Links</a></li>
    </ul>
    
    Wenn du Fragen dazu hast melde dich per PN.

    LG,
    Max
     
  6. DivDax

    DivDax Bismarckapfel

    Dabei seit:
    24.05.07
    Beiträge:
    143
    m.schoening's Version sieht schon wensetlich besser aus! ;)
    Zudem sei gesagt das ein hover nur bei Links zulässig ist.
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    @DivDax: Das stimmt nicht ganz. Die Pseudoklasse :hover ist nicht nur bei Link-Selektoren zulässig. Das Problem ist jedoch das IE 5.5 (und 6) diese Pseudoklasse nur bei Link-Selektoren erkennt. Theoretisch darf man dies also benutzen, ist aber nicht ratsam.

    Zitat aus A List Apart:
    Wenn es nicht anders geht schafft ein Javascript mit onmousover Abhilfe...
     
  8. KayHH

    KayHH Gast

    Ich mag ja diese Variante. Der Vorteil ist, dass man so auch was komplexeres als einfach nur einen farbigen Hintergrund nehmen kann, z.B. Bilder die beim MouseOver von schwarz/weiß auf farbig switchen.

    Code:
    <style type="text/css">
      #menu a {
        display:block;
        width:135px;
        margin: 1em 0; padding:8px 0 10px 15px;
        font: bold 14px/1 sans-serif;
        color:black;
        background: url(button.gif) 0 0 no-repeat;
        text-decoration: none;
      }
      #menu a:hover {	
        background-position: -150px 0;
        color:#cccccc;
      }
      #menu a:active {
        background-position: -300px 0;
        color: white;
      }
    </style>
    
    <div id="menu">
      <a href="(EmptyReference!)">Blog</a>
      <a href="(EmptyReference!)">Podcast</a>
      <a href="(EmptyReference!)">apfeltalk</a>
    </div>
    
    Das Bild sieht dann wie folgt aus. Der Witz an dieser Technik ist, dass ein Bild alle Varianten enthält und beim MouseOver oder Klicken einfach entsprechend verschoben wird.


    KayHH
     

    Anhänge:

  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Ja das geht ja auch bei meinem ;)...das gute an der Technik ist, das :hover braucht nicht extra zu laden und dan hakt das nicht so! Für background-image auf jeden Fall die beste Lösung.

    Einen Vorschlag hätte ich noch für dich Kay:

    Code:
    #menu a {
         display:block;
         width:135px;
         height: [COLOR=Red]XX[/COLOR]px;
         margin: 1em 0; 
         padding-left: 15px;
         color:black;
         font: bold 14px/1 sans-serif;
         text-decoration: none;
         line-height: [COLOR=Red]XX[/COLOR]px; /*Hier den wert XX von height einsetzen*/
         background: url(button.gif) 0 0 no-repeat;
      }
    
     

Diese Seite empfehlen