JQueryのホバー機能が正常に動作しない

Question

私は3つの画像（例：tab1.jpg）と、1つのJQueryホバー機能に縮小しようとしているマウスオーバー画像（例：tab1m.jpg）を持っています。私が使っていた前に：働いたが、不必要に長いと冗長だった

$('#tab1').hover(function(){ 
    $(this).attr("src", 'images/tab1m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab1.jpg'); 
}); 
$('#tab2').hover(function(){ 
    $(this).attr("src", 'images/tab2m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab2.jpg'); 
}); 
$('#tab3').hover(function(){ 
    $(this).attr("src", 'images/tab3m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab3.jpg'); 
}); 

。 - 私のマウスは、正常に変わりますが、元の（tab1.jpg/TAB2/TAB3）の画像に戻りません画像の上に働いていなかった

$('.navimg').hover(function(){ 
    var tab = ($(this).attr('id')).substring(3,4); 
    $(this).attr('src','images/tab'+tab+'m.jpg'); 
}, 
function(){ 
    $(this).attr('src','images/tab'+tab+'.jpg'); 
}); 

：だから私はそれを変更してみました。誰がなぜこれが起こっているのか教えてもらえますか？ありがとう！

Answer 1

変数]タブでは、未定義であるあなたの第二の機能でbecuaseそれは、元には戻りません。

あなたは、いくつかのCSSを使用する方法について

Answer 2

これらは2つの異なるスコープを持つ2つの異なる機能です。 2番目の変数で宣言された変数にはアクセスできません。

（ホバーの外にあなたの宣言var tabを行います）ので、両方の内部関数でアクセスできます

var tab = ''; 

$('.navimg').hover(
    function(){ 
     tab = ($(this).attr('id')).substring(3,4); 
     $(this).attr('src','images/tab'+tab+'m.jpg'); 
    }, 
    function(){ 
     $(this).attr('src','images/tab'+tab+'.jpg'); 
    } 
); 

Answer 3

どのように問題を解決するために、あなたの第二の機能に

var tab = ($(this).attr('id')).substring(3,4); 

を追加することができますか？

#tab1{background-image: url(/images/tab1m.jpg)} 
#tab1.hover{background-image: url(/images/tab1.jpg)} 
#tab2{background-image: url(/images/tab2m.jpg)} 
#tab2.hover{background-image: url(/images/tab2.jpg)} 
#tab3{background-image: url(/images/tab3m.jpg)} 
#tab3.hover{background-image: url(/images/tab3.jpg)} 

、あなたのjQueryのホバーができ：

$('.canHover').hover(function(){ 
    $(this).addClass('hover'); 
}, 
function(){ 
    $(this).removeClass('hover'); 
}); 

その後、あなたの 'タブ' のそれぞれに上記のCSSや「canHoverを使用して

<div id="#tab1" class="canHover">Tab 1</div> 
<div id="#tab2" class="canHover">Tab 2</div> 
<div id="#tab3" class="canHover">Tab 3</div> 

'canHover' クラスを追加しますセレクタで任意の要素にホバー機能を追加することができます。