jQuery 호버 패인 자식에서 깜박임

Question

OK. 여기 내 기본 HTML 구조입니다 :

<ul class="tabNavigation"> 
    <li> 
    <a href="#">Main Button</a> 

    <div class="hoverTab"> 
     <a href="#">Link Within Div</a> 
    </div> 
    </li> 
</ul> 

그리고 여기 내 jQuery를 명령입니다 :

당신이 mouseenter/리튬을하는 MouseLeave, 자식 DIV가/표시 사라하도록되어 있지만, 문제는 A입니다

$('ul.tabNavigation li').mouseenter(function() { 
    $('ul.tabNavigation div.hoverTab').hide(); 
    $(this).children('div.hoverTab').stop(false, true).fadeIn('fast'); 
}); 

$('ul.tabNavigation li').mouseleave(function() { 
    $('ul.tabNavigation div.hoverTab').hide(); 
    $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast'); 
}); 

태그를 클릭하면 탭이 깜박입니다. 마치 링크를 굴려 마우스가 왼쪽 버튼을 눌렀을 때처럼 ...

제안 사항이 있으십니까?

Answer 1

나는 당신이 무엇을하고 있는지 완전히 이해하고 있지 않습니다. 하지만 시작시 호버 탭을 숨기는 또 다른 숨기기 (아래 참조)를 추가했습니다.

그냥 내 문서에서 mouseenter/ready binding 위의 준비가되었습니다. 내가 그랬을 때 탭이 페이지로드에 표시되지 않았고 내가 리 위로 마우스를 가져 가면 아이가 깨끗하게 표시되고 숨어있었습니다.

나는 너가 뭘하고 있는지 보지 못했지만 그게 나를 위해 청소하는 것 같았 어.

$(document).ready(function(){ 
    $('ul.tabNavigation div.hoverTab').hide(); 

    $('ul.tabNavigation li').mouseenter(function() { 
     $('ul.tabNavigation div.hoverTab').hide(); 
          $(this).children('div.hoverTab').stop(false, true).fadeIn('fast'); 
       }); 

    $('ul.tabNavigation li').mouseleave(function() { 
     $('ul.tabNavigation div.hoverTab').hide(); 
     $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast'); 
      }); 

    }); 

Answer 2

D' oh. 나는 그것을 알아 냈 ... 그리고 나는이의 원인을 '제대로 전체 코드를 삽입해야했습니다 :

모든 차이를 만드는

<ul class="tabNavigation"> 
    <li> 
    <a href="#">Main Button</a> 

    <div class="hoverTab"> 
     <ul> 
     <li><a href="#">Link Within Div</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

.... 내가 바보 mouseenter 할당 된 것/모두 떠나 에 선택기를 변경 LI뿐만 아니라 태그 아이 ...

:

$('ul.tabNavigation > li') 

는 Ah..got ...이 제대로 작동