jQuery的鼠標懸停在圖像上方

股利來交換其他圖像，我想在同一時間，當鼠標懸停/懸停< img src="images/logo.png" />在< div id="swap" >添加"-h.png"所有IMG SRC結束並返回到".png"鼠標移開jQuery的鼠標懸停在圖像上方

這是我已經和它不工作：

<div id="header-wrap"> 
    <div id="swap"> 
     <img src="images/4.png"/> 
     <img src="images/3.png"/> 
     <img src="images/2.png"/> 
     <img src="images/1.png"/> 
    </div> 
    <header id="header"> 
     <div id="site-logo"><a href="#"><img src="images/logo.png" /></a></div> 
    </header> 
</div><!-- /#header-wrap --> 

$(document).ready(function() {  
    $('#site-logo').hover(function(){  
     $('#swap img').replace('.png','-h.png');  
    },  
    function(){  
     $('#swap img').replace('-h.png','.png');  
    }); 
});

剛剛更新到下面...圖像現在交換，但所有4個影像交換到/4-h.png替代4- h.png，3 -h.png，2-h.png和1-h.png

$(document).ready(function() { 
    var newSrc = ""; 
    $('#site-logo').hover(function(){ 
     newSrc = $('#swap img').attr('src').replace('.png','-h.png'); 
     $('#swap img').attr('src', newSrc); 
    },  
    function(){ 
     newSrc = $('#swap img').attr('src').replace('-h.png','.png');  
     $('#swap img').attr('src', newSrc); 
    }); 
});

來源

2013-01-11 creativemonkey

試試這個：

/* so it's not working 
    $(document).ready(function() {  
     $('#site-logo').hover(function(){  
      $('#swap img').attr('src').replace('.png','-h.png');  
     },  
     function(){  
      $('#swap img').attr('src').replace('-h.png','.png');  
     }); 
    }); 
    */

行，所以我想通了.replace方法是純粹的一個JavaScript 試試這個：

$(document).ready(function() { 
    var newSrc = ""; 
    $('#site-logo').hover(function(){ 
     $('#swap img').each(function() { 
      newSrc = $(this).attr('src').replace('.png','-h.png'); 
      $(this).attr('src', newSrc); 
     }); 
    },  
    function(){ 
     $('#swap img').each(function() { 
      newSrc = $(this).attr('src').replace('-h.png','.png');  
      $(this).attr('src', newSrc); 
     }); 
    }); 
});

來源

2013-01-11 06:19:47 bondythegreat

謝謝，但它不起作用。 – creativemonkey

這是一個不錯的工作，圖像現在交換，但所有4張圖像交換爲4-h.png而不是4-h.png，3-h.png，2-h.png和1-h.png – creativemonkey

i沒有意識到你有4個圖像..所以我編輯它與每個loop.should現在工作 – bondythegreat

試試這個代碼

$(document).ready(function() {  
    $('#site-logo').hover(function(){  
     $('#swap img').attr('src','-h.png');  
    },  
    function(){  
     $('#swap img').attr('src','.png');  
    }); 
});

或

$(document).ready(function() {  
     $('#site-logo').hover(function(){  
      $('#swap img').each(function(){ 
$(this).attr('src','-h.png'); 
      });  
     },  
     function(){  
      $('#swap img').each(function(){ 
$(this).attr('src','.png'); 
}); 
     }); 
    });

來源

2013-01-11 06:28:09

你可以試試這個只是用.slice()這種方式，你可以實現你的目標：

$('#site-logo').hover(function() { 
    var atr = $('#swap img').attr('src').slice(0, -4); 
    var newAtr = atr+'-h.png' 
    $('#swap img').attr('src', newAtr); 
},function() { 
    var atr = $('#swap img').attr('src').slice(0, -6); 
    var newAtr = atr+'.png' 
    $('#swap img').attr('src', newAtr); 
});

結賬小提琴：http://jsfiddle.net/6vqJV/

來源

2013-01-11 06:39:15 Jai

$("#site-logo").hover(function() { 

    $("#swap img").each(function() { 
    var test = $(this).attr('src'); 
    $("#helper").append("<span>" + test.replace('.png', '-h.png') + "</span><br />"); 
    }); 

}, 

function() { 
    $("#swap img").each(function() { 
    var test = $(this).attr('src'); 
    $("#helper2").append("<span>" + test.replace('-h.png', '.png') + "</span><br />"); 
    }); 

});

Test Link

來源

2013-01-11 06:43:33

jQuery的鼠標懸停在圖像上方

回答

相關問題