Bild ändern src bei Hover mit URL als ID

Question

Ich versuche, ein Bild src bei Hover zu ändern.

Ich möchte ein Bild durch seine URL oder ALT-Text identifizieren, weil ich in diesem Fall keine Klasse hinzufügen kann.

Ich habe die Anweisungen von diesem Stack-Überlauf Link ohne Glück versucht:

CSS: Change image src on img:hover

wenn sie über die URL dieses Bildes schwebt:

https://static1.squarespace.com/static/5463b725e4b06d233c3a876a/t/56a921809cadb641f7ce1a09/1453912583654/Screen+Shot+2016-01-27+at+8.34.20+AM.png?format=750w

Ich würde es gerne zu diesem Bild wechseln:

(Ich habe einen Link für dieses Bild, aber ich kann nicht mehr th. verwenden ein zwei Links in meinem Beitrag)

Hier ist die URL meiner Seite:

https://toby-thiermann.squarespace.com/new-index/

Danke.

Answer 1

Normalerweise ist der beste Ansatz für etwas wie dies, ein Tag nicht zu verwenden und stattdessen CSS zu verwenden. Wenn Sie die Hintergrundbild-Methode verwenden und sie zu Ihrem div hinzufügen, können Sie das Bild austauschen.

so etwas wie dieses Versuchen:

<div class="your-class-here"></div> 

und dann CSS wie folgt aus:

.your-class-here{ 
    width: 200px; 
    height: 200px; 
    background-image: url("your-non-hover-image") 
    transition: all ease 250ms 
} 
.your-class-here:hover{ 
    background-image: url("your-hover-image") 
} 

Ich habe einen Übergang, das macht es nur ein wenig glatter.