如何在使用jQuery懸停整個li時改變li裏面的圖像？

Question

我想改變裏面的列表項中的錨（li一個img）使用這個簡單的jquery腳本的圖像，但只改變圖像，如果鼠標懸停它，但我需要改變圖像，如果懸停整個李。

$(".overview li a img").hover(
    function() { this.src = this.src.replace("_off", "_on"); }, 
    function() { this.src = this.src.replace("_on", "_off"); } 
); 

Answer 1

改變你的選擇瞄準li，那麼處理程序中找到img兒童和修改其源：

$(".overview li").hover(
    function() { 
     $(this).find("img")[0].src = $(this).find("img")[0].src.replace("_off", "_on"); 
    }, function() { 
     $(this).find("img")[0].src = $(this).find("img")[0].src.replace("_on", "_off"); 
    });  
}); 

如果你喜歡，你可以擠這種行爲成一個單一的功能參數.hover（這是一個有點不太可讀雖然）：

$(".overview li").hover(function() { 
    var img = $(this).find("img")[0]; 
    img.src = (img.src.indexOf("_off") > -1) ? 
     img.src.replace("_off", "_on") : img.src.replace("_on", "_off"); 
}); 

Answer 2

你有沒有想過使用CSS ，還有sprites來達到這個效果嗎？

這會給你你想要什麼，而不必訴諸於JavaScript和無稍有延遲上懸停，而圖像加載首次