Anderes Bild bei Mouseover

Question

Ich arbeite derzeit in Wordpress mit dem Visual Composer. Ich möchte ein Bild einfach für den Moment mouseover ändern. Ich habe viele verschiedene Wege gesehen, dies mit Java und CSS zu tun, aber dafür scheint nichts spezifisch zu sein.

Vielen Dank!

Answer 1

Sprich: Ich habe einen Link -

<a class="my-link" href="http://www.my-website.com"></a> 

Ich brauche ein Bild auf der Maus über diesen Link zu zeigen. So werde ich zwei Dinge in meinem CSS- hinzufügen

1. Um das Bild zu dem Link hinzufügen

   .ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;} 
   

2. Eigenschaft schweben Hinzufügen

   .ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;} 
   

Answer 2

Arbeitsbeispiel überprüft er Ersetzen Sie Bilder durch Ihre eigenen.

<a class="foo" href="#"> 
    <img src="http://lorempixel.com/400/200/food/1/" /> 
    <img src="http://lorempixel.com/400/200/food/2/" /> 
</a> 

<style> 
    .foo img:last-child{display:none} 
    .foo:hover img:first-child{display:none} 
    .foo:hover img:last-child{display:inline-block} 
</style> 

http://jsfiddle.net/gd8ba/light/

Thanks