jQuery image swap on nav hover

Question

ユーザーがメニュー項目の上を移動したときにjQueryを使用してナビゲーション上の画像スワップを実行しようとしています。要素の高さに応じて異なるイメージを読み込む必要があります。

これまでのところ私はある程度機能しており、これを持っている：

$(document).ready(function() { 
    $('a.mainlevel').hover(function() { 
     if ($(this).height() > 15) { 
      $('a.mainlevel').mouseenter(function() { 
       $('a.mainlevel:hover').css('background-image','url(/images/menuHoverBig.gif)'); 
      }); 
      $('a.mainlevel').mouseleave(function() { 
       $('a.mainlevel').css('background','#505051'); 
      }); 
     } 
     else { 
      $('a.mainlevel').mouseenter(function() { 
       $('a.mainlevel:hover').css('background-image','url(/images/menuHover.gif)'); 
      }); 
      $('a.mainlevel').mouseleave(function() { 
       $('a.mainlevel').css('background','#505051'); 
      }); 
     } 
    }); 
}); 

私がいる問題は、私は、サイズXの要素の上にカーソルを置くならば、それは正しいイメージをロードしますが、その後、私はホバーときということですサイズYの要素の上には、Xの画像がロードされます。次にYの上にマウスを移動すると、正しく動作します。 Xに戻ると、Y画像は、2回目のホバーまで読み込まれます。

私はjQueryでそれほど上手くいないので、おそらく明らかなことですが、うまくいきません。

乾杯

Answer 1

セレクタを$（これ）に変更する必要があります。そしてまた、あなたがmouseenterエンドmouseleave機能

$((function() { 
        $('a.mainlevel').hover(function() 
        { 
        var _image = "url(/images/menuHover.gif)"; 
        if ($(this).height()> 15){ 
         _image = "url(/images/menuHoverBig.gif)"; 
        $(this).css("backround",_image); 
       }, 
       function(){ 
         $(this).css('background','#505051'); 

       }); 


       }); 

Answer 2

を必要といけない私はこの問題は、あなたがhover()のmouseenterとmouseleave関数内mouseenterとmouseleaveハンドラを割り当てているという事実である、と設定するときにも、すべての.mainlevel要素を参照していると思います現在の要素だけでなく、css代わりにこれを試してください：

$(document).ready(function() { 
    $('a.mainlevel').hover(
     function() { 
      var $el = $(this);  
      var bgImage = 'url(/images/menuHover.gif)'; 
      if ($el.height() > 15) 
       bgImage = 'url(/images/menuHoverBig.gif)');     
      $el.css('background-image', bgImage); 
     }, 
     function() { 
      $(this).css('background', '#505051'); 
     } 
    ) 
});