如何用jQuery替換hover.jpg圖像

Question

我有以下輸出。

<ul id='centrelist'> 
<li class="centreicon"><a href="admin/manage_mycentre/22"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre1.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/22">Aktiv trening Arendal</a></div></a></li> 
<li class="centreicon"><a href="admin/manage_mycentre/16"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre2.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/16">Aktiv trening Blindheim</a></div></a></li> 
<li class="centreicon"><a href="admin/manage_mycentre/17"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre3.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/17">Aktiv trening Eid</a></div></a></li> 
... 

現在，當我將鼠標懸停任何圖像，我想改變它與jQuery來hover.jpg。

我有以下但它不工作。

$(function() { 
    $(".centreimg") 
     var orgimg = $(this).attr("src"); 
     .mouseover(function() { 
      var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg"; 
      $(this).attr("src", hoverimg); 
     }) 
     .mouseout(function() { 
      $(this).attr("src", orgimg); 
     }); 
}); 

我希望有人能幫助我。

在此先感謝。

Answer 1

只是一個小幅調整

$(function() { 
    $(".centreimg").mouseover(function() { 
      var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg"; 
      var orgimg = $(this).attr("src"); 

      $(this).attr("src", hoverimg); 
      $(this).attr("title", orgimg); 
     }) 
     .mouseout(function() { 
      $(this).attr("src", $(this).attr("title")); 
     }); 
}); 

你必須使用data()方法對象中的數據存儲

Answer 2

jQuery的代碼，這使得它更簡單。

$('.centreimg').hover( 
function() { 
    $(this).data('src',$(this).attr('src')); 
    $(this).attr('src', 'hover.jpg'); //or hoverimg if it is declared 
}, 
function(){ 
    $(this).attr('src', $(this).data('src')); 
});