Разное Изображение на Mouseover

Question

Я в настоящее время работаю в Wordpress usnig 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