Как изменить изображение на мыши?

Question

Я хочу сделать что-то вроде этого.

<a href="#" class="change-hover" > 
<img src="img/image-1.jpg" alt=""/> 
<img src="img/image-2.jpg" alt=""/> 
</a> 
<a href="#" class="change-hover" > 
<img src="img/image-3.jpg" alt=""/> 
<img src="img/image-4.jpg" alt=""/> 
</a> 

По умолчанию 'изображение-1.jpg' & IMG/изображение-3.jpg и т.д .. должны показать, при наведении мыши 'в' тег, скрыть первое изображение и шоу 'изображения 2.jpg' & 'image-4.jpg' и т. Д.

Для справки ознакомьтесь с этим дисплеем продукта. http://www.thecorner.com/searchResult.asp?dept=tcshoesw&brand=25&gender=D&norewrite=1

Спасибо.

Answer 1

Если ваша цель - показать второе изображение при наведении и скрыть его на mouseout, показывая первый, то вы можете использовать метод hover, как в приведенном ниже примере.

Обратите внимание, что второе изображение изначально скрыто с помощью CSS.

$('.change-hover').hover(function() { 
 
    $(this).find('img').hide().last().fadeIn(); 
 
}, function() { 
 
    $(this).find('img').hide().first().fadeIn(); 
 
});

.change-hover img { 
 
    display: none; 
 
} 
 
.change-hover img:first-of-type { 
 
    display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" class="change-hover"> 
 
    <img src="http://lorempixel.com/100/100/food/1" alt=""/> 
 
    <img src="http://lorempixel.com/100/100/food/2" alt=""/> 
 
</a> 
 

 
<a href="#" class="change-hover"> 
 
    <img src="http://lorempixel.com/100/100/food/3" alt=""/> 
 
    <img src="http://lorempixel.com/100/100/food/4" alt=""/> 
 
</a>

Answer 2

Вы можете сделать это с помощью CSS:

.change-hover { 
    float: left; 
} 

.change-hover img + img { 
    display: none; 
    position: absolute; 
    top: 0; 
} 

.change-hover img:hover + img, .change-hover img + img:hover { 
    display: block; 
} 

Проверить this fiddle.

Answer 3

Для этого вам не нужно jQuery, так как вы можете легко его использовать, используя ванильный JS и даже CSS.

Вы можете сэкономить время загрузки страницы, делая это (в ванильным JS):

<a href="#"> 
    <img src="img/image-1.jpg" onmouseover="this.src = 'img/image-2.jpg'" onmouseout="this.src = 'img/image-1.jpg'"> 
</a> 
<a href="#"> 
    <img src="img/image-3.jpg" onmouseover="this.src = 'img/image-4.jpg'" onmouseout="this.src = 'img/image-3.jpg'"> 
</a>