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");});  
     }); 
    });