Mouseover上的不同图像

Question

我目前在Wordpress中使用Visual Composer。我希望现在只需在鼠标悬停上更改图像。我已经阅读了许多使用Java和CSS进行此操作的不同方式，但似乎并没有特别针对这一点。

非常感谢！

Answer 1

说，我有一个链接 -

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

我需要显示在鼠标的图像在这个链接。所以，我会在我的CSS-添加两件事

1. 要添加图像的链接

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

2. 要添加徘徊财产

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

Answer 2

工作示例检查它，用你自己的图片替换图片。

<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