Question

嗨，大家好我一直在寻找这个答案，我的头疼。

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

由于

丹

编辑：我还希望当你将图像悬停时，原始图像会替换另一张图像，这样只有在鼠标悬停在图像上时才会出现新图像。

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

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

例如，看这里：
Change the image source on rollover using jQuery

悬停时多个图像交换

3 个答案: