Замена нескольких изображений при наведении

Question

Привет, ребята. Я искал этот ответ, и у меня болит голова.

У меня есть страница с изображениями членов команды, и я хочу, чтобы она была такой, чтобы при наведении курсора на каждое изображение появлялось другое изображение этого члена команды. Просто, я могу сделать это с помощью css для каждого члена, но мне было интересно, есть ли способ использовать запрос, чтобы это можно было сделать по имени файлов, например, dan.jp и dan-hover.jpg.

Спасибо

Dan

РЕДАКТИРОВАТЬ: Мне также хотелось бы, чтобы при наведении курсора на изображение исходное изображение заменяло другое изображение, поэтому новое изображение появляется только при наведении курсора на изображение.

Answer 1

Полагаю, вам нужно что-то вроде этого:

$('img').hover(function(){
    $(this).data('on',
        $(this).attr('src')).attr('src', $(this).data('on').replace(/(\.\w+)$/, "-hover$1")
    );
},function(){
    $(this).attr('src', $(this).data('on'));
});

Редактировать: для изменения только определенных изображений, которые вы можете (например) сделать:

поместите все нужные изображения в контейнер

<div class="desired_images">
    <img src="..." />
    ...
</div>

и затем измените селектор jQuery на:

$('.desired_images img') ...

Answer 2

Просто пользователь .hover

$('#images img').hover(
     $this = $(this); 
     function(){
         $this.data('src', $this.attr('src') );   // store the current image url on hover
         var img_name_extension = $this.data('src').split('.'); 
         var hover_image = img_name_extension[0] + '-hover.' + img_name_extension[1]; 
         $this.attr('src', hover_image); 
     }, 
     function(){ 
         $this.attr('src' , $this.data('src') ); // revert back to the old image url on hover out
     }
 ); 

Answer 3

На эту тему действительно много тем и примеров.

Например, посмотрите здесь:
Изменение источника изображения при наведении курсора с помощью jQuery