jQueryを使ってli全体をホバリングすると、li a img内の画像を変更するにはどうすればいいですか？

Question

この簡単なjqueryスクリプトを使用して、リスト項目（li a img）内のアンカー内の画像を変更しようとしていますが、マウスでマウスを動かすと画像が変更されますが、 。

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

Answer 1

その後、ハンドラ内img子どもたちを見つけて、そのソースを変更し、liをターゲットに、あなたのセレクタを変更します。

$(".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と画像のロード中にホバー上のわずかな遅延なしに