자바 스크립트 변화 내용 및 스크롤 메뉴 버그 어딘가에

Question

이 질문은 (다른 트위스트와 함께) 내가 물었다 previous question에 후속이다 그건 디버깅이 필요한 버그입니다. 내가 항목 A, 항목 B, 및 항목 C를 통해 스크롤 할 수 대신 내 마우스가 왜 어쨌든 무슨 일이 일어나고 항목 A를 떠날 때 완전히 사라질 필요합니다 http://jsfiddle.net/Wagtail/b6Juh/18/

:

여기 내 jsFiddle입니까?

<table id="headMenu"> 
    <tr> 
     <td id="head1">Item 1</td> 
     <td id="head2">Item 2</td> 
     <td id="head3">Item 3</td> 
    </tr> 
</table> 
<table id="subMenu"> 
    <tr> 
     <td>Dynamic Content!</td> 
    </tr> 
</table>​ 

CSS 코드

HTML :

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5% 0px 5%%;vertical-align:middle;} 
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;} 
#headMenu td:hover{background:rgb(162,200,240);} 
#subMenu td:hover{background:rgb(210,230,170);}​ 

자바 스크립트 코드 :

다음은 사용자의 편의를 위해 복사 자바 스크립트, HTML 및 CSS 코드의

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout; 

head1.onmouseover = function(displayMenu) { 
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>'; 
    head1.onmouseout = function(getScroll) { 
     subMenu.onmouseover = function(breakTimeout) { 
      clearTimeout(timeout); 
      subMenu.onmouseout = function(endFunction) { 
       subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>'; 
      }; 
     }; 
     timeout = setTimeout(function() { 
      document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>'; 
     }, a); 
    }; 
}; 

미리 답변 해 주셔서 감사합니다. 설명이 필요하면 답장 해 드리겠습니다.

Answer 1

마우스가 하위 메뉴 표 셀 중 하나에서 다른 것으로 이동함에 따라 subMenu.onmouseout 함수가 트리거됩니다. 이 문제를 해결하는 한 가지 간단한 방법은 셀 사이를 이동하는 또 다른 제한 시간을 추가하는 것입니다.

http://jsfiddle.net/b6Juh/22/