悬停时多个图像交换

Question

大家好，我一直在寻找这个答案，但我的头很痛。

我有一个包含团队成员图像的页面，我希望当您将鼠标悬停在每个图像上时，会出现该团队成员的另一张图像。很简单，我可以使用每个成员的 css 来完成此操作，但想知道是否有一种使用查询的方法，以便可以通过文件名来完成，例如 dan.jp 和 dan-hover.jpg。

谢谢

Dan

编辑：我还希望当您将鼠标悬停在图像上时，原始图像会替换另一个图像，因此新图像仅在鼠标悬停在图像上时出现。

Answer 1

只需用户 .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 2

我想你需要这样的东西：

$('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 3

关于这个主题确实有很多主题和例子。

例如，请看这里：
使用 jQuery 更改鼠标悬停时的图像源