Antworten auf deine Fragen:
Neues Thema erstellen

jQuery: img-Element bei hover wechseln

MelanieCibura

Noch nicht viel geschrieben

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

undefined

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

Posting-Frequenz: 14µHz

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
 
AW: jQuery: img-Element bei hover wechseln

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

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

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

Code:
$(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

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:

cebito

undefined

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.
 
Zuletzt bearbeitet:

MelanieCibura

Noch nicht viel geschrieben

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

me[code].Java(Script)

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben