javascriptのホバーの問題

Question

ユーザーがjqueryの.hover（）またはjavascriptのmou​​seenter（）を実行すると、マウスが要素を入力したときだけでなく、マウスがその要素内の要素をまたぐときもイベントがトリガーされます。どのようにして、マウスがその要素に入ったり出たりするときにトリガするように、これを止めることができますか？要素の要素はイベントに影響しません。

 $(document).ready(function(){ 
      introAnimation(); 

      $('#nav-item1').hover(function() { 
       $('#createSub').slideDown(300); 
      }); 
      $('#nav-item1').mouseout(function() { 
       $('#createSub').slideUp(300); 
      }); 

      $('#nav-item2').hover(function() { 
       $('#manageSub').slideDown(300); 
      }); 
      $('#nav-item2').mouseout(function() { 
       $('#manageSub').slideUp(300); 
      }); 
      $('#nav-item3').hover(function() { 
       $('#storeSub').slideDown(300); 
      }); 
      $('#nav-item3').mouseout(function() { 
       $('#storeSub').slideUp(300); 
      }); 
     }); 

Answer 1

ホバーには、アンオーバーさせる方法があります。

$(document).ready(function(){ 
     introAnimation(); 

     $('#nav-item1').hover(function() { 
      $('#createSub').slideDown(300); 
     },function() { 
      $('#createSub').slideUp(300); 
     }); 
     $('#nav-item2').hover(function() { 
      $('#manageSub').slideDown(300); 
     },function() { 
      $('#manageSub').slideUp(300); 
     }); 
     $('#nav-item3').hover(function() { 
      $('#storeSub').slideDown(300); 
     },function() { 
      $('#storeSub').slideUp(300); 
     }); 
    }); 

Answer 2

ハンドラ内でこれを追加します：あなたは、ネストされた子要素の上にマウスがときに発生ますマウスアウトイベント、の必要はありませ

if(ev.target !== this){ return; } 

ev.targetは、マウスイベントがトリガするものではありません。 thisはイベントに結びついたものです