hover für Bilder erstellen

[ratlos]

Hallo!

Ich weiß, das ist absoluter Kinderkram, aber irgendwie will es mir nicht gelingen :uhm:

Ich möchte die social media Buttons auf meiner Seite mit einem mouseover versehen, diese sollen dann grün angezeigt werden. Wenn ich hover anwende, tut sich allerdings nichts...

Ich muss dazu sagen, dass ich mich nicht besonders auskenne, mache gerade eine Schulung, die Seite ist meine Projektarbeit und so langsam treibt sie mich zur Verzweiflung, das kann doch nicht so schwer sein...?


html:

<div id="facebook"><a href="link zum facebookprofil"<img src="facebook.jpg" target="new"></a></div>


css:

#facebook
{
left: 780px;
top: 19px;
position: absolute;
width: 15px;
height: 15px;
z-index: 1;
}

#facebook:hover
{
background-image: url(../images/facebookhover.jpg);
}


Vielleicht weiß jemand einen Rat, was ich falsch mache, oder warum das so nicht funktionieren kann?

Lieben Dank

 

[cythux]

AW: hover für Bilder erstellen

aber vielleicht hilft es Dir ja schon etwas mehr

bei der CSS handelt es sich jedoch um Sass/compass

 

[ratlos]

AW: hover für Bilder erstellen

Danke dir, mh, irgendwie hilft mir das nicht weiter...

 

[cythux]

AW: hover für Bilder erstellen

hast du die Seite online, falls ja kannst du den link posten

oder den code halt hier mittels bbcode posten

 

[cythux]

AW: hover für Bilder erstellen

Bitte als BBcode nutzen
dieser steht im Modus erweitert zu verfügung

 

[ratlos]

AW: hover für Bilder erstellen

mh, wie erstelle ich den *tut mir echt leid*

 

[ratlos]

AW: hover für Bilder erstellen

scheiße, ich habs, danke für deine Hilfe!

 

[cythux]

AW: hover für Bilder erstellen

Einfach auf den roten Markierten Bereich klicken, daszwischen kannst du dann den code einfügen

 

[ratlos]

AW: hover für Bilder erstellen

fürs nächste mal weiß ich bescheid, danke

 

[SWFP]

AW: hover für Bilder erstellen

Das hatte ich auch oft, auch wenn ich nicht erklären kann warum.

Sonst nimm einfach inline-JavaScript. Einige meckern, aber es hilft und ist meiner Meinung nach völlig legitim als Problemlösung.

 

[Pixelverwender]

AW: hover für Bilder erstellen

Und wenn ratlos dem geneigten Forumsbesucher jetzt noch erläutert, wie er das Problem lösen konnte, hilft es vielleicht dem Nächsten, der im Forum nach Lösungen sucht.

 

[Myhar]

AW: hover für Bilder erstellen

<div id="facebook"><a href="link zum facebookprofil"><img src="facebook.jpg" target="new"></a></div>

Wenn dein HTML Code so aussieht ist es klar, warum es nicht funktioniert. Auch ist inline Javascript hier keine zu empfehlende Lösung, da hilft es eher, sich die Grundlagen von HTML und CSS anzueignen.
Dein "Problem" ist, dass du im CSS dem div mit der ID facebook bei hover eine neue Hintergrundgrafik zuweist. Du hast in diesem div jedoch ein weiteres Bild, welches sich logischerweise über dein per hover definiertes Hintergrundbild legt. Das kannst du einfach mittels zB Firebug selbst austesten.

Du kannst per CSS auch keine Pfade zu Bildern austauschen, du musst also dein HTML/CSS Konstrukt anders aufbauen. Bei deinem geposteten Code fehlt dir übrigens auch > vom <a href="" ... Tag-Teil.

<a id="facebook" href="Link/me/somewhere.html">Facebook </a>

#facebook{background:url('path/to/FB_Image.png') left top }
#facebook:hover{background-position:left bottom}

Die Pfade, Positionen etc. sind natürlich anzupassen. Auch würde ich dir raten, mit Sprites zu arbeiten.

 

[SWFP]

AW: hover für Bilder erstellen

Statt

target="new"

würde ich auch eher

target="_blank"

empfehlen.