jQuery - 在悬停上更改图像src

Question

基本上我想更改图像src在悬停上添加-active.png。

所以fb.png在悬停时会变成fb-active.png，而在不悬停时会变成fb.png。

我也不太清楚我在做什么错了，所以我会后到目前为止我的代码： -

HTML

 <div id="main-contact" class="right"> 

      <div id="main-social"> 

       <a href="#!"><img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /></a> 

       <a href="#!"><img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /></a>    

      </div> 

     </div> 

jQuery的

$(document).ready(function() { 

$(function(){ 
    var regexactive = /-active\..*$/; 

    var ct = $('#main-social'); 
    var imgs = $('.img-social img', ct); 

    function activateImage(imgs){ 
     imgs.each(function(){ 
      var img = $(this); 
      var src = img.attr('src'); 
      if(!regexactive.test(src)){ 
       img.attr('src', src.replace('.png', '-active.png')) 
      } 
     }); 
    } 

    ct.on('hover', '.img-social', function(){ 


     var img = $('.img-social img'); 
     activateImage(img); 
    }); 
}); 

}); 

Answer 1

这可以做到没有JavaScript，只有CSS。 像这样：

给像facebook，tw或twitter等的图标fb不同的类。

HTML：

<div id="main-social">  
    <a href="#!"><span class="img-social fb left" title="Company - Facebook"></span></a> 
    <a href="#!"><span class="img-social tw left" title="Company - Twitter"></span></a> 
    <a href="#!"><span class="img-social ln left" title="Company - LinkedIn"></span></a> 
    <a href="#!"><span class="img-social wp left" title="Company - Word Press"></span></a> 
</div> 

CSS：

.img-social{display:inline-block;height:20px;width:20px;} 
.fb{background:url("images/fb.png");} 
.fb:hover{background:url("images/fb-active.png");} 
.tw{background:url("images/twitter.png");} 
.tw:hover{background:url("images/twitter-active.png");} 
.ln{background:url("images/linkedin.png");} 
.ln:hover{background:url("images/linkedin-active.png");} 
.wp{background:url("images/wordpress.png");} 
.wp:hover{background:url("images/wordpress-active.png");} 

您可以使用精灵效率。

Answer 2

如果你不需要遵从旧版浏览器，你可以在CSS中做到这一点。

要做到这一点在jQuery中，你可以尝试这样的事：

$(".img-social").hover(function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    }); 
}, function(){ 
    $(this).attr("src", function(index, attr){ 
     return attr.replace("-active.png", ".png"); 
    }); 
}); 

Answer 3

还有的这样做的方法负载。最简单的方法之一是将两个状态放在同一图像中，然后在悬停时更改背景位置。这样就没有多余的等待悬停图像加载，因为它已经存在。

<div id="main-social"> 
    <a href="#!" alt="Company - Facebook" class="left fb">facebook</a> 
    <a href="#!" alt="Company - Twitter" class="left tw">twitter</a> 
    <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a> 
    <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a>    
</div> 

CSS

#main-social a { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    text-indent:-1000px; 
    overflow:hidden; 
    background-position: left top; 
} 
#main-social a.fb { 
    background-image: url('fb.png'); 
} 
#main-social a.tw { 
    background-image: url('tw.png'); 
} 
#main-social a.li { 
    background-image: url('li.png'); 
} 
#main-social a.wp { 
    background-image: url('wp.png'); 
} 
#main-social a:hover, #main-social a.active { 
    background-position: left bottom!important; 
} 

Demo JSFiddle

Answer 4

可以使用了mouseenter，鼠标离开功能。

<a href="#" class="hover-change-img"><img src="sample1.png" class="img-responsive"></a> 

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

    $("document").ready(function(){ 
     $(".hover-change-img img").mouseenter(function(){  
      $(this).attr('src','sample2.png');  
     });  
     $(".hover-change-img img").mouseleave(function(){  
      $(this).attr('src','sample1.png');  
     }); 
    }); 

</script> 

Answer 5

我使用这个脚本..基于上面的脚本...它只是在活动和原始图像之间切换。

$("document").ready(function(){ 
     $(".my_image").mouseenter(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace(".png", "-active.png"); 
    });  
     });  
     $(".my_image").mouseleave(function(){  
      $(this).attr('src',function(index, attr){ 
     return attr.replace("-active.png",".png");});  
     }); 
    });