bild/link soll bei hover "hüpfen"

[Geri345]

Hallo,

Ich habe einen socialmedia-button in eine webseite eingebaut.
Er ist halb unter dem hauptdiv versteckt und soll beim hover ausfahren.

mein grundgedanke war, dass ich mit hover den top-wert der div positionierung übergehe. funktioniert aber leider nicht so recht.
jemand bitte rat?

hier der css-code

#facebook{
position:absolute;
left:670px;
top:5px;
height:32px;
width:32px;
border:none;
background-image:url(../img/facebook.png);
}


.facebook:a{height:32px;width:32px;display:block;}
.facebook:link{height:32px;width:32px;display:block;}
.facebook:visited{height:32px;width:32px;display:block;}
.facebook:active{height:32px;width:32px;display:block;}
.facebook:hover{height:32px;width:32px;display:block;margin-top:-4px;}

 

[Timmer]

Dein Grundgedanke war auch völlig richtig, allerdings ist die Umsetzung falsch.

Da du keinen HTML Code angegeben hast, kann ich nur vermuten:

#facebook { position:absolute; left:670px; top:5px; height:32px; width:32px; border:none; background-image:url(../img/facebook.png); } 
#facebook:hover { top:1px; }
a.facebook {height:32px;width:32px;display:block;}
a.facebook:link {height:32px;width:32px;display:block;}
a.facebook:visited {height:32px;width:32px;display:block;}
a.facebook:active {height:32px;width:32px;display:block;}

Allerdings könnte man dir mit etwas HTML Code oder einem Link besser weiterhelfen ;)

 

[prm]

Du kannst den "Ausfahr-Effekt" auch mit unterschiedlichen background-positions lösen, was ich den absoluten Positionierungen vorziehen würde:
Navigation mit ausfahrbaren Registern

 

[Timmer]

Das Problem ist, dass er einen Social Media Button eingebaut hat. Wenn ich das richtig verstanden habe, nutzt er also einen fertigen Button von Facebook o.ä., welcher kein Bild ist. Falls nicht, sind beide Methoden möglich, aber deine ist eleganter, da das eigentliche Element nicht springt^^

 

[Banana_Jones]

Du kannst den "Ausfahr-Effekt" auch mit unterschiedlichen background-positions lösen, was ich den absoluten Positionierungen vorziehen würde:
Navigation mit ausfahrbaren Registern

definitiv der schönere Weg. Für den modernen Browser könnte man noch mit CSS-Transitions arbeiten, damits nicht allzu "sprunghaft" wirkt.

 

[Geri345]

@timmer: danke, perfekt
naja der "button" ist ein bild (einfach das logo im png-format)
aber er macht jetzt das was er soll :)

thx nochmal für die hilfe leute