jQuery: img-Element bei hover wechseln

[MelanieCibura]

Hallo,

ich bin schon seit Stunden auf der Suche, wie ich per jQuery ein img-Element bei .mouseenter wechsel. Das Bild dann wieder zurückzusetzten sollte dann ja ähnlich funktionieren nur mit dem alten Pfad zum Bild und .mouseleave

Kann mir da eine weiterhelfen?

Es geht um dieses Element hier:

Dort sollen bei mouseover die facebook, twitter, googleplus und email buttons jeweils wechseln.

Vielen Dank schonmal für eure Hilfe!

 

[cebito]

AW: jQuery: img-Element bei hover wechseln

Warum nimmst die nicht als Hintergrundbilder für das a-Element und wechselst die per CSS? Ist um Einiges performanter und funktioniert auch ohne JS.

 

[Duddle]

AW: jQuery: img-Element bei hover wechseln

ich bin schon seit Stunden auf der Suche, wie ich per jQuery ein img-Element bei .mouseenter wechsel.

Das Internet - und die Welt der Technik im Allgemeinen - ist größtenteils Englisch-dominiert. Übersetzt du deine Wünsche also in das Englische ("change img src jquery hover") und tippst sie in das englische Google ein bekommst du sofort mehrere passende Artikel:
http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery
http://stackoverflow.com/questions/...e-src-attribute-of-an-image-tag-on-link-hover



etc.


Duddle

 

[Pascal Bajorat]

AW: jQuery: img-Element bei hover wechseln

Hi,
ich würde dir auch empfehlen es via CSS zu machen:

a{background:url(bild.png);}
a:hover{background:url(bild2.png);}

falls es doch jQuery sein soll, dann am einfachsten so:

$(document).ready(function(){
    $('a').hover(function(){
        $(this).css('background', 'url(bild2.png)');
    }, function(){
        $(this).css('background', 'url(bild.png)');
    });
});

Das sind jetzt nur einfache Beispiele, es geht natürlich schöner und auch variabler.

 

[MelanieCibura]

AW: jQuery: img-Element bei hover wechseln

Wenn ich das mit CSS und :hover mache:

Was mache ich dann falsch, dass das Hintergrundbild nur angezeigt wird, wenn ich in das a-Tag auch Text schreibe? Da soll ja nichts drüber stehen, sondern das a-Tag soll leer sein, doch dann wird gar nichts angezeigt.

Grüße
Melanie

 

[cebito]

AW: jQuery: img-Element bei hover wechseln

a ist ein inline-Element, du kannst ihm also keine Höhe/Breite zuweisen. Dafür musst du es erst in ein Block- bzw. inline-block-Element umwandeln.

Und setz die bitte auch noch in Listenpunkte (li), a als Kind von ul ist nicht valide.

 

[MelanieCibura]

AW: jQuery: img-Element bei hover wechseln

Hey, super, danke jetzt klappt es

Das <ul> war noch drin, da ich es eben nochmal mit einer Liste ausprobiert hatte, die aber wieder herausgelöscht hatte und dann wieder hochgeladen habe. Die <ul>s habe ich wohl vergessen zu löschen

Aber vielen Dank. Ich habe das a jetzt auf display:block gesetzt und jetzt klappt es

Grüße
Melanie

 

[mindraper]

AW: jQuery: img-Element bei hover wechseln

hi

hm, ich hab' ja k. A. ob du die <a>-tag jetzt frei irgendwo innerhalb eines <div>-tags rumfliegen hast, aber für semantische korrektheit solltest du sie immer in listen packen. aber das nur so am rande.

evtl. nehme ich mir ja damit zu viel raus, aber die wissensangabe auf deiner page bzgl. html + css solltest du vielleicht nochmal überdenken, wenn du solche fragen stellen musst...

nix für ungut