Hover Effekt

bplaced Allgemeiner Support
1

Hii,

ich krieg den Hover Effekt bei meinem Navi nicht hin.

So siehst ungefähr anhand des Bsp. aus:

style.css:

…

}
#pic1 {background-image:url(www4.pic-upload.de/11.02.10/gi4zhjy72u33.png); display:inline }
#pic1:hover {background-image:url(www4.pic-upload.de/11.02.10/ter94if5pnen.png); display:inline;

Und so bei meiner index.html:

…

Kann mir jetzt einer mal sagen, was daran Falsch ist, das ist meine Homepage wo ich es gerade ausprobiere: http://warrock-freaks.bplaced.net/

Kann mir einer sagen was ich Falsch mache?

2

Zunächst mal ist falsch, dass du ein DIV- in ein A-Element packst - das ist nicht erlaubt (so lange du noch kein HTML 5 nutzt).

3

Kannst du mir dann wie das richtig heißt?

4

mv-web-design.de/?CSS-Tricks:Hover-Images

5

…oder du machst aus den zwei Bildern eins. Dann hätte deine Grafik die Maße: 120x130

<div id=nav> <li><a href="#" class="start-hov"></a></li> <li><a href="#" class="weiterer-hov"></a></li> </div>

CSS:

#nav
     {
     overflow:hidden;
     height:120px;
     list-style: none;
     }
   #nav li
            {
            display:inline;
            }
        .start-hov,
        .weiterer-hov
              {
               width:120px;
               height:65px;
               display:block;
              }
        .start-hov
              {
               background:url(../pic.xyz)no-repeat;
              }
        .weiterer-hov
              {
               background:url(../pic.xyz)no-repeat;
              }
      .start-hov:hover,     
      .weiterer-hov:hover
          {
           background-position:0-65px;
          }

ACHTUNG! Im Internet Explorer könnte das ganze nicht funktionieren. Habs da nicht getestet.

6

Danke, werds ausprobieren :wink: Aber wie meinst du das mit zwei Grafiken eins?

7

Wie gesagt, obs im I-E so geht weis ich nicht. Diese Klapperkiste unterstütz ich nicht mehr. :smiley:

Die erste Version ist nicht Valide, daher hier noch paar Änderungen:

HTML

<div id=nav>
                          <a href="#" class="start-hov"></a>
                          <a href="#" class="weiterer-hov"></a>
         </div>

CSS:

#nav
     {
     overflow:hidden;
     height:120px;
     list-style: none;
     }
        .start-hov,
        .weiterer-hov
              {
               width:120px;
               height:65px;
               display:block;
              }
        .start-hov
              {
               background:url(../pic.xyz)no-repeat;
              }
        .weiterer-hov
              {
               background:url(../pic.xyz)no-repeat;
              }
      .start-hov:hover,     
      .weiterer-hov:hover
          {
           background-position:0-65px;
          }
8

Ich hab ein etwas längeren Code gefunden, den kann man sogar sofort in die index.html machen, ich würd aber empfehlen den in css umzuwandeln :wink:

HTML Code:

[code]

a.nav_button_start{
display:inline-block;
background-image:url(/navi_buttons/navi_start.png);
height:65px;
width:120px;
}

a.nav_button_start:hover{
background-image:url(/navi_buttons/navi_start_hover.png);
}

a.nav_button_forum{
display:inline-block;
background-image:url(/navi_buttons/navi_forum.png);
height:65px;
width:120px;
}

a.nav_button_forum:hover{
background-image:url(/navi_buttons/navi_forum_hover.png);
}

a.nav_button_hacks{
display:inline-block;
background-image:url(/navi_buttons/navi_hacks.png);
height:65px;
width:120px;
}

a.nav_button_hacks:hover{
background-image:url(/navi_buttons/navi_hacks.hover.png);
}

a.nav_button_videos{
display:inline-block;
background-image:url(/navi_buttons/navi_videos.png);
height:65px;
width:120px;
}

a.nav_button_videos:hover{
background-image:url(/navi_buttons/navi_videos_hover.png);
}

a.nav_button_bilder{
display:inline-block;
background-image:url(/navi_buttons/navi_bilder.png);
height:65px;
width:120px;
}

a.nav_button_bilder:hover{
background-image:url(/navi_buttons/navi_bilder_hover.png);
}

a.nav_button_maps{
display:inline-block;
background-image:url(/navi_buttons/navi_maps.png);
height:65px;
width:120px;
}

a.nav_button_maps:hover{
background-image:url(/navi_buttons/navi_maps_hover.png);
}

a.nav_button_waffen{
display:inline-block;
background-image:url(/navi_buttons/navi_waffen.png);
height:65px;
width:120px;
}

a.nav_button_waffen:hover{
background-image:url(/navi_buttons/navi_waffen_hover.png);
}

[/code]
9

@games-meet
dein Code ich murks^^
Da stimmt gar nichts (aufs CSS nicht geachtet) aber dort ist nen Div vor nem Body dann noch recht am ende nen nen schleißendes Head und nen 2. Body^^ Wo haste denn den bitte her :smiley:

edit^^
Whoa^^ Was für Schreibfehler :smiley:

[quote]dein Code ich murks^^
Da stimmt gar nichts (aufs CSS nicht geachtet) aber dort ist nen Div vor nem Body dann noch am ende nen schließender Head und nen 2. Body^^ Wo haste denn den bitte her :smiley:[/quote]

10

Nein, bei mir klappts http://warrock-freaks.bplaced.net/, sieht man ja

11

hab meinen Post mal überarbeitet^^
Aber man sieht das du den Code auch nur stupft mit den Fehlern eingebaut hat :smiley: Dass das so überhaupt funktioniert ist nen Wunder^^
Wenn du es ohne nicht schaffst… hier die Fehler im Detail: (wobei ich diese schon genannt hatte^^)
validator.w3.org/check?uri=http% … or%2F1.654

12

13 Errors, 7 warning(s)

Danke, coole Seite :slight_smile: